A drop every two weeks

VibeBox Motion follows semver: each drop bumps the minor version, and each item keeps its own version in its SPEC. A drop lands every two weeks after the free launch; a skipped drop is noted here.

0.1.0 (unreleased): the free launch

The first public set: the pieces VibeBox built for its own site, generalised for any brand, plus new pieces made for the library. Every item ships with a SPEC, a live demo, a poster and a loop, and passes the merge gate: types, server render, axe in both themes, eight visual snapshots, its JavaScript budget, a clean shadcn install, and a person's review.

3D centrepieces

• Launch Stack (Free): a website taken apart into four glass layers.
• Equalizer Ring (Free): light bars pulsing around a floating glass box.
• Infinity Ribbon (Free): a spectrum ribbon on an endless loop.
• Puzzle Cube (Pro): scrambles, solves with the inverse moves, celebrates.
• Thinking Orbs (Pro): three orbs think, then build your mark in pixels.
• Logo Sculpture (Pro): any SVG mark, extruded and lit.
• Liquid Orb (Pro): a liquid assistant drop that listens, thinks and speaks.

Shader backgrounds

• Spectrum Mesh (Free): a soft mesh gradient that drifts and leans toward the cursor.
• Pool Caustics (Pro): sunlight through moving water, with pointer ripples.
• Fluted Glass (Pro): reeded-glass refraction over an image or art, moved by scroll and the pointer.
• Liquid Before/After (Pro, in Cursor and touch): a comparison slider with a liquid seam.

AI and chat

• Chat Launcher Kit (Free): launcher, teaser questions, window and quick menu.
• Thinking Indicator (Free): an honest, staged working line.
• Reply Cards (Free): estimates, steps, links and FAQs as typed cards.

Scroll, navigation and frames

• Build Story (Free): a pinned scroll story with a phone stepper.
• Scroll Rail (Free): a section rail that previews, jumps and drags.
• Equalizer Menu Toggle (Free): three bars that fold into an X.
• Browser Frame (Free): a browser window that pans a full page.
• Phone Frame (Free): a phone with real scrolling content and tilt.

Text

• Kinetic Headline (Free): words rise into place behind masks, on CSS alone.
• Odometer Stat (Free): digits spin once into place; screen readers get the value.
• Liquid Word Swap (Free): one headline word cycles with a liquid morph.

Cursor, contact and booking

• Context Cursor (Free): a pointer label that says what a click will do.
• Contact Bloom (Free): one button that blooms into call, text, Viber, Messenger, WhatsApp and email.
• Booking Calendar (Free): a keyboard-first date and time-slot picker; availability comes as props.

Lokal

• Banderitas (Free): fiesta bunting that sways with the breeze, the cursor and scroll.
• Parol (Pro): a 3D Christmas lantern with capiz panels, tassel tails and chasing lights.

Brand and loaders

• Equalizer Wordmark (Free): letters that bounce with scroll speed.
• Footer Wordmark (Free): a giant wordmark that lifts under the pointer.
• Wireframe Cube Loader (Free): a CSS-only loader with no JavaScript.

Blocks

Full page sections for client sites and for npx shadcn add, built on the components above. Each block takes one content object checked by its schema, renders missing facts as designed fill-ins, follows the site's tokens in both modes, and installs in components/vibebox/<slug>. 29 Free, 25 Pro.

• Headers: Glass Bar (Free), Island Nav (Pro).
• Heroes: Split Stage, Centered, Editorial, Kinetic Type, Bento and Page Intro (Free); Sculpture, Shader, Liquid Orb, Word Swap, Device Duo and Fiesta (Pro).
• Logos and stats: Logo Belt and Stats Band (Free); Logo Constellation (Pro).
• Services: Services Bento, Icon Grid and Zigzag (Free); Glass Bento and Scroll Story (Pro).
• Process, about and team: Steps, About Story and Team Grid (Free); Build Story Process, Split Scroll About and Duotone Team (Pro).
• Gallery: Grid and Masonry (Free); Before After, Fluted and Coverflow (Pro).
• Testimonials: Honest Testimonials (Free); Chat Thread (Pro). Real quotes only.
• Pricing and menus: Pricing Tiers and Menu Teaser (Free); Price Flip and Flip Card Menu (Pro). Prices are facts the business sets.
• FAQ and booking: Details FAQ, Booking Band and Booking Request (Free). Booking Request asks for a service, a preferred day and time of day, and a way to reply, and sends it as an inquiry: no slots or confirmations a booking system has not made.
• Contact: Split, Strip, Cards and Split Bloom (Free); Quick Chat (Pro).
• Calls to action: CTA Band (Free); Spectrum Mesh, Caustics and Parol (Pro).
• Footers: Column Footer (Free); Giant Wordmark and Equalizer Wordmark (Pro).

Templates and copy kits

• Six templates for Launchpad: AI Studio Landing, Premium Business, SaaS Product, Portfolio Showcase, Content Hub and Local Service Pro, each a page-by-page recipe of blocks.
• Eight copy kits (local services, SaaS, ecommerce, property, advisory, clinic, creative studio and a professional fallback) with alternatives for every non-factual slot. Drafts until a person signs them off.

Platform

• The public registry at /r/{name}.json for npx shadcn add @vibebox/<slug>.
• Sculptures and the orb follow your --spectrum-* tokens (the orb's painted fallback today; its liquid in a later drop).
• Registry items that use three.js install @types/three with it.
• The shader stage: one WebGL2 context for every shader background on a page, each drawn at its own size.
• Section tones wash and wash-2: the page tinted with the brand or accent colour, so a site's colour rhythm never repeats a surface on two neighbouring sections.
• Site worlds (@vibebox/motion/engine/worlds): background art by type of business (leaf light, stage beams, halftone, drafting grid, engraved line work, contours, sunburst, a night network, stripes, ruled paper, stars), seams between bands and motifs at the hero's edges, as one stylesheet per site; blocks are unchanged.
• Main-button personalities (block kit ActionLink, set by data-button-kind and data-button-style on the document): orbit, frame, slab, ticket, tag, pebble and halo, with the client's button setting as the materials; plain without a kind.
• A generated brand mark (block kit LogoMark): a shape with an industry glyph or the initial, or a small figure, drawn from content until the business supplies a logo.
• Prints (block kit): placeholder scenes drawn like small photographs in the palette, with a print finish (an arched window, a still life, a room corner, hills, tiles, light through blinds, a neighbourhood map), as the scenes archway, vase, room, hills, tiles, blinds and streets.
• Pricing Tiers: a price that is still a fill-in is set at reading size, and no plan's contents can push past its card.
• The site shell: every assembled site and the Launchpad preview carry the Scroll Rail (its new sections prop numbers a site's sections and names them by their eyebrows).
• Logo Belt ribbon: two rows set huge, serif italic over outlined type, sliding in opposite directions with the scroll (CSS scroll-driven, no script). Premium Business, Local Service Pro and SaaS Product use it.
• Column Footer stage: the full footer on a deep surface with a back-to-top link, closing with the business name set poster-size in outline; its letters rise and a light passes through them as the footer arrives. The templates use it, and the closing section never shares its surface.
• Glass Bar header: the phone menu's toggle folds two bars into a cross, and the menu opens from its corner with numbered links arriving in turn (CSS only, still a native <details>).
• Stage objects (@vibebox/motion/engine/three/objects, from the Launchpad site kit): one 3D object per kind of business (a tooth, a cup, a house, tickets and eleven more), built from primitives in the site's palette, on a stage that builds it in, turns it with the scroll and tilts it toward the mouse or a finger. Split Stage Hero shows one on a disc when stage.object is set (the composer sets it by industry), with a hint inviting people to play.
• Headline opening (block kit SlotText reveal): words rise from behind masks in turn, the serif accent softens in, and the lead and actions follow, CSS only. The free heroes use it; the Launchpad editor still edits the words in place.
• How It Works Steps journey: a track that fills with the brand colour as the steps scroll through, lighting each serif number as it arrives (CSS scroll-driven). Premium Business, Local Service Pro and SaaS Product use it.
• The content and block-kit registry libs: slot helpers and section schemas (zod), and the shared pieces blocks are made of (section shell, actions, fill-ins, placeholder scenes, 47 line icons, channels, an inquiry form that works without JavaScript).