Ilia Mashkov
cd59766f92
- Use the shared Modal for dialog mechanics; ImageLightbox keeps only the view-transition coordination (just-in-time view-transition-name handoff between thumb and dialog frame, ESC routed through onCancel). - Switch to <Image> for both thumb and dialog image; thumb is priority/sizes- driven for LCP, dialog image is lazy-loaded (deferred until open). - New brutal-outline utility for the dialog frame: outline paints after children so subpixel image bleed can't cover it; dialog gets overflow- visible so the outline isn't clipped. - lightbox-image utility caps image dimensions to viewport minus close-button and footer headroom, with box-sizing: content-box. - Lightbox dialog gets view-transition-name lightbox-dialog (z=20) and the frame gets lightbox-frame (z=30) so both stack cleanly above the page during the open/close transition. Footer drops its named VT group since section-body no longer slides over it. - Cream-tinted backdrop replaces the blur (Firefox-friendly), color-mix with var(--cream) for the token reference. - scrollbar-gutter: stable on html so locking body scroll doesn't shift the layout.
This is a Next.js project bootstrapped with create-next-app.
Getting Started
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
Learn More
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
Deploy on Vercel
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.