FreeIn reviewv1.0.0

Launch Stack

A website taken apart into four glass layers: data, logic, design and the live site, with light rising through them.

npx shadcn@latest add @vibebox/launch-stack

Content

About

A website, taken apart. Four glass panels stack up in 3D: a data layer with a grid of cells, a logic layer with linked nodes, a wireframe of the design, and the live site on top. Packets of light travel up through the stack, so the image says "everything works together" without a word. On hover the layer nearest the pointer slides out like a drawer. Ported from the VibeBox hero gallery, where it is the third piece.

Use it when

A hero or a section that explains building software or websites.
A tech-forward brand that uses the spectrum accent.

Skip it when

A page already has a 3D centrepiece; use one per page.
Motion level 0 or 1 sites; use a still illustration.

Install

1Add the VibeBox registry to components.json:

{
  "registries": {
    "@vibebox": "https://motion.vibeboxph.com/r/{name}.json"
  }
}

2Add the component with the shadcn CLI:
npx shadcn@latest add @vibebox/launch-stack

3Use it:

import { LaunchStack } from "@/components/vibebox/launch-stack";

<LaunchStack className="aspect-[4/3] w-full" />

Code

2 files

components/vibebox/launch-stack/index.tsx

/**
 * VibeBox Motion · Launch Stack
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export { LaunchStack, type LaunchStackProps } from "./launch-stack.client";

components/vibebox/launch-stack/launch-stack.client.tsx

/**
 * VibeBox Motion · Launch Stack
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import type { ReactNode } from "react";
import { SculptureCanvas } from "@/lib/vibebox/sculpture-canvas";

/* Loaded only when the canvas nears the viewport; module scope keeps the loader's identity stable. */
const load = () => import("@/lib/vibebox/engine/three/sculptures/stack").then((module) => module.createStack);

export type LaunchStackProps = {
  /** Accessible name for the artwork. */
  label?: string;
  /** Shown until the first frame and on devices without hardware WebGL2. */
  poster?: ReactNode;
  className?: string;
};

export function LaunchStack({ label = "A website taken apart into four glass layers, with light rising through them", poster, className }: LaunchStackProps) {
  return (
    <SculptureCanvas
      slug="launch-stack"
      load={load}
      options={undefined}
      label={label}
      poster={poster}
      className={className}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	"A website taken apart into four glass layers, with light rising through them"	Accessible name for the artwork.
poster	ReactNode	—	Shown until the first frame and without hardware WebGL2.
className	string	—	Merged with cn(); give it a size or aspect ratio.

Accessibility and motion

Keyboard: Not focusable; the artwork has no actions.
Screen readers: role="img" with a descriptive label; the live caption is hidden.
Touch: A touch on the artwork makes it react like a hover; it never blocks scrolling.
Reduced motion: A composed still frame of the finished piece; no idle motion or hover response.

Edge cases and limits

Very small sizes (under about 280 px wide) lose the layer detail; use a still image instead.
Without hardware WebGL2 (software renderers included) the poster stays.

Equalizer Ring
Free
A crown of light bars pulsing like a visualizer around a floating glass box; bars rise toward the pointer.
3D · three.js
Infinity Ribbon
Free
A glossy spectrum ribbon twisted into a figure-eight, with a travelling light pass; it bends toward the pointer.
3D · three.js
Logo Sculpture
Pro
Any SVG logo extruded into a glossy 3D object that builds in, sways at rest and leans toward the pointer.
3D · three.js