More like this
Subscribe to Unlock
Signal/26 — Conference & Launch-Day Website (Next.js + Motion)
A website for the "Signal/26" conference (12–13 March 2027, Port City Convention Centre, Colombo). Built with Next.js 15 (static export), Tailwind v4, Motion and ics. It has an animated noise-gradient background, Unbounded display type and sticker badges. The hero has a per-letter rise and a split-flap countdown that becomes "HAPPENING NOW" during the event. Also: hashtag marquee, 8 speakers with hover bios and a focus-trapped modal, a 2-day schedule with track filters and a live Now/Next bar (?now= to simulate), ticket tiers with early-bird and sold-out states, a click-to-load map with travel info, a sponsors wall, FAQ, newsletter validation, and Add to calendar (.ics) for the event or any session. All content lives in lib/event.ts. Run with npm install && npm run dev.
Subscribe to Unlock
Aero — 3D Single-Product Store (Next.js + R3F + GSAP)
A single-product e-commerce page for "Aero Pods" wireless earbuds. Built with Next.js 15 (static export), Tailwind v4, three 0.180, @react-three/fiber 9, drei 10, GSAP ScrollTrigger and Lenis. The 3D case is one rounded box split by clipping planes. A 400 vh pinned scroll opens the lid, moves the camera to 3 hotspots (Adaptive ANC, 11 mm drivers, 36 h battery) with leader-line callouts, then explodes the buds into parts. Includes a live colourway picker (Chalk, Graphite, Sage, Ember), specs table, reviews, FAQ, sticky add-to-cart and a cart drawer (front-end only). Low-power and mobile devices get a static fallback. Drop /public/model.glb in to swap the model. Run with npm install && npm run dev.
Subscribe to Unlock
Halo: Liquid-Glass App Launch Page
A launch landing page for a mobile app, styled as liquid glass: frosted panels over slowly changing violet, cyan and rose gradient blobs. A pinned iPhone mockup swaps through 4 pure HTML/CSS app screens as you scroll, while feature text alternates sides and 5 glass notification chips circle the phone in 3D. The page also has a glass feature grid, a count-up ratings strip, App Store and Google Play buttons, a front-end waitlist with a success state, an FAQ accordion and a footer. Built with Next.js 15, Tailwind 4 and Framer Motion 12. To rebrand it, edit the single src/lib/site.ts file.
Subscribe to Unlock
Lumen — AI On-Call Copilot Landing Page
Dark, motion-rich one-page SaaS landing site for a fictional AI incident-response copilot. Next.js 15 App Router, Tailwind v4, hand-written shadcn-style Button/Accordion, Motion 14. Mouse-following spotlight hero with animated gradient headline and a 3D-tilted HTML product mock that flattens on scroll; infinite logo marquee; 6-card bento with live mini-animations (typing, pulsing chart, animated beams, ticking runbook, counter); self-drawing How-it-works line; 3-tier pricing with sliding monthly/yearly pill; opposite-direction testimonial marquees; Radix FAQ; grid-background CTA and footer. Single accent token (#7c5cff), respects prefers-reduced-motion, responsive down to 375px. All copy centralised in src/lib/site.ts.
Subscribe to Unlock
Routelane — Animated AI Router Landing Page
A three-file (HTML, CSS, JS), dependency-free landing page for a developer tool. Includes a loader animation, a canvas background of three parallel lanes with moving packets, a scroll-driven catalog that gathers 40 chips into a counter, self-typing terminals, a word-by-word token compression demo, comparison table tabs, routing picker, dashboard mock, live GitHub stats and a light/dark toggle. Replace the brand, numbers and REPO before publishing.