Liquid Orb
ProA living liquid drop for an AI assistant: it listens, thinks and speaks, dents under touch and morphs between shapes.
3D · WebGL2
v0.1.030 pieces in the first drop
Motion that makes a site feel made.
Original React components for Tailwind: 3D centrepieces, AI chat pieces, scroll stories and frames. Install them free with the shadcn CLI, or let VibeBox launch the whole site.
npx shadcn@latest add @vibebox/launch-stack- pieces, all with live demos
- 30
- ship no JavaScript at all
- 3
- visual snapshots per piece, every change
- 8
- categories, more every drop
- 12
Featured
Pieces people stop to play with
Build Story
FreeA process told by scrolling: steps pin beside an artboard of a website that builds itself, phase by phase.
Scroll · Motion
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
Three orbs think over a cloud of pieces, then beam them into place until your mark stands in pixels.
3D · three.js
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
Scroll Rail
FreeThe page scrollbar redrawn: a spectrum thumb, section ticks, and a readout that names where you are.
Scroll · Motion
Browse by what it does
- 3D centrepieces7Hero art that moves. Each piece loads only when it nears the viewport, shows a poster until its first frame, and settles into a still frame for reduced motion.
- Shader backgrounds3Living backgrounds that stay light: one shared WebGL2 context for the whole page, a frame budget, and a still image when motion is reduced.
- Text effects3Type that earns attention without hiding the words: every effect keeps the real text in the page for search engines and screen readers.
- Cursor and touch2Interactions for the pointer that never leave touch or keyboard users behind.
- Scroll stories2Stories told by scrolling, with a stepper on phones and plain steps when motion is reduced.
- Navigation1Menus and headers with real focus handling, built for phones first.
- Forms and booking2The pieces that turn a visit into an inquiry or a booking.
- AI and chat3The front end of an assistant: launcher, window, thinking states and rich replies. Bring your own model.
- Loaders and transitions1Waiting states and transitions that render on the server and cost almost nothing.
- Brand and proof2Ways to put a brand name on stage, for any word you give them.
- Device frames2Frames for showing websites and apps, with real content scrolling inside.
- Lokal: Filipino-crafted2Pieces drawn from Philippine craft and celebration, for local brands and the holidays.
How it works
One command, and it looks like yours
- Pick a piece and try it live: phone, tablet or desktop, light or dark, with its real options.
- Install it with the shadcn CLI. The code lands in your project; you own it.
- It follows your tokens. Set your spectrum once and every piece, even the 3D ones, takes your colours.
npx shadcn@latest add @vibebox/launch-stackimport { LaunchStack } from "@/components/vibebox/launch-stack";
<LaunchStack className="aspect-[4/3] w-full" />Made to the standard VibeBox ships client sites at
Original code
Written by VibeBox, reviewed by a person. Nothing copied or ported from other libraries, and no GSAP.
Phones first
Every piece is tested at 390 px with touch, and keeps its point on a small screen.
Reduced motion, always
Each piece has a calm version: loops stop, 3D settles into a still, nothing hides behind motion.
Budgets, enforced
Each piece's own JavaScript has a ceiling that CI checks. Server pieces ship none.
Your tokens
shadcn-compatible tokens and your own spectrum: pieces take on your brand without edits.
Accessible by default
axe in both themes and the keyboard path from each spec, tested on every change.
Rather have the whole site built?
VibeBox plans, previews and launches complete websites for businesses, with these pieces and a team behind them.
Launch it with VibeBox