VividCanvas is a high-fidelity, "Awwwards-tier" digital experience designed for modern design practices and visual laboratories. It pushes the boundaries of standard web layouts by blending brutalist typography with elegant editorial motion.
- Brutalist Minimalism: High-contrast layouts using a mix of massive Sans-serif headlines and delicate italicized serifs.
- Immersive Motion: Leveraging GSAP for scroll-triggered animations and horizontal pinning that creates a "roller-coaster" navigation feel.
- Fluid Continuity: Powered by Lenis smooth scrolling to ensure every interaction feels premium and intentional.
- Interface CMS: A floating, retractable management layer that allows for real-time content manipulation without breaking the visual flow.
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS
- Animation: GSAP (GreenSock Animation Platform) + ScrollTrigger
- Smooth Scroll: Lenis
- UI Components: ShadCN UI (Radix UI)
- AI Integration: Genkit (Generative AI Framework)
- Typography: Inter Tight (Sans) & Playfair Display (Serif)
- Explore the Archive: Scroll through the horizontal "Selected Works" gallery to experience the pinning motion.
- Interface CMS: Click the floating gear icon in the bottom-right corner to open the live editor. Changes update the layout in real-time.
- Dynamic Elements: Observe the parallax background text and the high-information navigation bar featuring live time and activity status.
src/components/preview/: The core editorial sections (Hero, About, Work, CTA).src/components/editor/: The CMS interface components.src/hooks/use-lenis.ts: The smooth-scroll initialization logic.src/lib/site-content.ts: The data model and default content for the studio.
Created with Firebase Studio / Est. 2024
