mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
fix/splash-scroll-lock
First visit of a session ended with the page unscrollable. A hard refresh
appeared to fix it, which is what made it look like a caching oddity rather
than a bug: the session flag then skips the splash and neither lock runs.
Two things were managing html.style.overflow and they fought.
1. The splash's own lock sets overflow:hidden while the cover is up, saving
the previous value ("").
2. enterFromButton then captured the previous value for the transition lock.
By then it was already "hidden", from step 1.
3. `entered` flips, the splash lock cleans up and restores "". Page scrolls.
4. Up to 3s later the transition's release() restores its captured value,
which is "hidden". Page is locked, and nothing ever clears it.
The release is now unconditional. By the time it runs the splash is gone and
the page must scroll, so restoring a captured value is wrong by construction:
there is no state worth preserving, only a lock to drop.
Verified with a real wheel event 5s after load, past both the 1337ms gate and
the 3s release cap where the re-lock used to land: overflow is empty and the
page scrolls.
Such Software Website
Corporate website for Such Software LLC, a full-service software provider based in Kennett Square, PA.
Lighthouse Scores
| Page | Performance | Accessibility | SEO | Best Practices |
|---|---|---|---|---|
| Home | 99% | 100% | 100% | 77%* |
| Services | 98% | 100% | 100% | 100% |
| About | 99% | 100% | 100% | 100% |
*Home page Best Practices is 77% due to Cloudflare Turnstile third-party cookies.
Tech Stack
- Next.js 15 with App Router
- React 18 + TypeScript 5
- Tailwind CSS 3 + Framer Motion 11
- Radix UI accessible primitives
- next-themes for dark/light mode
- Zod for validation
- Cloudflare Turnstile for bot protection
- Turborepo + pnpm 9
Project Structure
such-software-site/
├── apps/web/ # Next.js website
│ ├── src/app/ # Pages (home, services, about)
│ ├── src/components/ # React components
│ ├── tests/ # Playwright a11y tests
│ └── public/ # Static assets
├── packages/ui/ # Shared UI components
└── packages/config/ # Shared config
Development
pnpm install # Install dependencies
pnpm dev # Start dev server at localhost:3000
pnpm build # Production build
pnpm start # Start production server
Testing
cd apps/web
pnpm test:a11y # Run Playwright accessibility tests
pnpm test:ui # Run tests with interactive UI
42 accessibility tests across Chromium, Firefox, and WebKit covering WCAG 2.2 AA criteria, heading hierarchy, color contrast, and keyboard navigation.
Accessibility
- WCAG 2.2 AA: engineered to meet, audited against (Lighthouse measured 100%)
- Skip-to-main link, semantic HTML5, ARIA labels
- Proper heading hierarchy, color contrast (4.5:1+)
prefers-reduced-motionsupport- Keyboard navigation, focus indicators
- Structured data (JSON-LD) and canonical URLs
Environment Variables
Create apps/web/.env.local:
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your_site_key
TURNSTILE_SECRET_KEY=your_secret_key
See apps/web/.env.example for template.
License
Proprietary - Such Software LLC
Languages
TypeScript
81%
MDX
15.3%
CSS
2.8%
JavaScript
0.9%