Equalizer Ring
FreeA crown of light bars pulsing like a visualizer around a floating glass box; bars rise toward the pointer.
3D · three.js
30 components
Components
Original, motion-first pieces for React and Tailwind. Each one is server-rendered or lazy, tuned for phones, and calm under reduced motion. Hover a card to see it live.
30 items
Infinity Ribbon
FreeA glossy spectrum ribbon twisted into a figure-eight, with a travelling light pass; it bends toward the pointer.
3D · three.js
Launch Stack
FreeA website taken apart into four glass layers: data, logic, design and the live site, with light rising through them.
3D · three.js
Liquid Orb
ProA living liquid drop for an AI assistant: it listens, thinks and speaks, dents under touch and morphs between shapes.
3D · WebGL2
Any SVG logo extruded into a glossy 3D object that builds in, sways at rest and leans toward the pointer.
3D · three.js
Puzzle Cube
ProA 3x3x3 puzzle cube that scrambles itself, solves with the exact inverse moves, then celebrates.
3D · three.js
Three orbs think over a cloud of pieces, then beam them into place until your mark stands in pixels.
3D · three.js
Fluted Glass
ProReeded-glass refraction over an image or spectrum art; the flutes slide with scroll and lean with the pointer.
Backgrounds · WebGL2
Sunlight through moving water, over any section: caustic light that wanders and ripples under the pointer.
Backgrounds · WebGL2
Spectrum Mesh
FreeA soft spectrum mesh gradient that drifts behind your content and leans toward the cursor; still under reduced motion.
Backgrounds · WebGL2
Kinetic Headline
FreeA headline that rises into place word by word behind a mask, on CSS alone, with serif and spectrum accents.
Text · CSS
Liquid Word Swap
FreeOne word in a headline cycles through options with a liquid morph: "Websites that sell, book, grow".
Text · CSS
Odometer Stat
FreeRolling digits for real numbers: each digit spins once into place when visible, and screen readers get the value.
Text · CSS
Context Cursor
FreeA cursor label that says what a click will do ("View", "Play", "Drag") and changes with the target. Fine pointers only.
Cursor and touch · Motion
A before-and-after slider whose edge is a wobbling liquid seam; drag, tap or use the arrow keys.
Cursor and touch · WebGL2
Build Story
FreeA process told by scrolling: steps pin beside an artboard of a website that builds itself, phase by phase.
Scroll · Motion
Scroll Rail
FreeThe page scrollbar redrawn: a spectrum thumb, section ticks, and a readout that names where you are.
Scroll · Motion
A menu button whose three spectrum bars idle like a level meter and fold into an X when the menu opens.
Navigation · CSS
Booking Calendar
FreeA date and time-slot picker with a keyboard grid; availability arrives as props, so any booking back end fits.
Forms and booking · CSS
Contact Bloom
FreeOne button that blooms into Call, Text, Viber, Messenger, WhatsApp and email: the channels customers already use.
Forms and booking · CSS
The front of an AI chat: a magnetic launcher with a question teaser, a window or phone sheet, and a quick menu.
AI and chat · Motion
Rich Reply Cards
FreeTyped cards for AI chat replies: links, steps, plans, estimates, projects and FAQs, rendered from data.
AI and chat · Server
An honest working line for AI chats: a small orb, a status that advances in stages, and a spectrum comet.
AI and chat · Motion
A CSS-only wireframe cube with a glowing core, for the moment before a 3D scene or heavy view is ready.
Loaders · Server
A header wordmark whose leading letters bounce like equalizer bars with scroll speed, with a spectrum tint on hover.
Brand and proof · Motion
Footer Wordmark
FreeA poster-sized word for the foot of a page whose letters rise toward the cursor like equalizer bars.
Brand and proof · Motion
Browser Frame
FreeA browser window that frames a site and pans through the full page on hover, on focus, or on a slow loop.
Devices · Server
Phone Frame
FreeA phone that shows a mobile layout, scrolls through the full page, and tilts toward the cursor.
Devices · Motion
Banderitas
FreeFiesta bunting strung across a section: pennants or cut-paper banners that sway with the breeze, the cursor and scroll.
Lokal · Canvas
Parol
ProA 3D parol, the Filipino Christmas lantern: capiz panels, a ring of petals, tassel tails and chasing lights.
Lokal · three.js