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
Editorial Motion Portfolio (Next.js + GSAP + Lenis)
An editorial personal portfolio for a designer, built in Next.js 15 with Tailwind v4, GSAP ScrollTrigger and Lenis smooth scroll. It uses huge Inter Tight type with Instrument Serif italic accents on an off-white #f1eee8 background with a single #ff4d00 accent, and supports a light/dark theme switch. Features: a 000–100% preloader that splits off-screen; a hero name revealed letter by letter from masks; a pinned horizontal gallery of 6 projects with animated generative covers and hover previews (vertical cards on mobile); a parallax portrait with count-up stats; services rows that expand on hover; a giant email link with an animated underline and a live local clock; a custom cursor that shows 'View' over projects; and curtain page transitions to a static project-detail template. All content lives in one config file (src/lib/site.ts). Run with npm install && npm run dev.
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.