UI lab.
Hero sections I build to try new motion, 3D and layout techniques. Every one is the live page, not a recording. 3 are my own concepts; the rest are recreations I built from reference specs to practise, and they are labelled that way.
- particle-hero.html
01
Particle head
Original
A 3D head made of 140,000 particles. Move the cursor across it and the dots bloom and smear behind you.
Three.js, GLSL
Open full screen - plety.html
02
Plety
Recreation of a reference spec
A dark landing page for an AI decision tool, with a silk ribbon of light flowing behind the headline.
React, Tailwind CSS
Open full screen - portiva.html
03
Portiva
Recreation of a reference spec · media: SceneAI
A creative agency hero over an underwater film, with a soft scrim that keeps the type readable on bright frames.
HTML, Tailwind CSS, video
Open full screen - autopilot-hero.html
04
Autopilot switch
Original
Flip the 3D switch and the inbox counter rolls from 248 unread to 3 that need you. One spring drives the whole page.
React Three Fiber, react-spring
Open full screen - bloopa-zero.html
05
Bloopa Zero
Original
A soda can that spins on its axis and tilts toward the cursor. Pick a flavor and the label, colors and fruit all change.
Three.js, GSAP
Open full screen - velora.html
06
Velora
Recreation of a reference spec · media: SceneAI
A luxury car-rental hero: oversized type over a light-trail film of a car at speed.
HTML, CSS, video
Open full screen - faruq.html
07
faruq
Recreation of a reference spec · media: SceneAI
A night photographer's portfolio hero, “stories in light”, built from layered portrait images.
HTML, CSS
Open full screen - sabrina-residences.html
08
Sabrina Residences
Recreation of a reference spec · media: SceneAI
A real-estate landing page where every word and image animates in, step by step, on load.
HTML, CSS, video
Open full screen - scroll-wave-field
09
Scroll wave field
Built on an Originkit component
Swell, a sound app hero: a field of glowing particles rolls in waves under the cursor and on scroll.
Next.js, React, Motion
Open full screen - hero-24
10
Hero 24
Built on an Originkit component
Hirefy, a global hiring hero: a wireframe globe held between two hands, with proof cards that drift in on scroll.
Next.js, Three.js, d3-geo
Open full screen - hero-26
11
Hero 26
Built on an Originkit component
An enterprise AI hero on a blue dithered shader that ripples outward behind the headline.
Next.js, OGL (WebGL)
Open full screen