Glass Capsule Stack

Pro

A frosted glass tube that stacks feature chips and drops the oldest into a card.

illustrationsglasshopperframer motiontabler icons react

Overview

Glass Capsule Stack is a React and Tailwind CSS feature showcase for landing pages that drops your feature chips into a frosted glass tube, in Next.js or any React app, animated with Framer Motion. On each beat a chip falls in with a small squash, the stack settles, and the oldest chip squeezes out of the floor into a featured card. The loop stops off screen, in background tabs, for reduced motion, or with paused, and screen readers get the chips as a plain list. Keep at least one more chip than stackSize, or the stack shrinks to avoid repeats.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add glass-hopper

Usage

Import GlassHopper from @/components/wensity/glass-hopper and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

 1"use client";
 2import { GlassHopper } from "@/components/wensity/glass-hopper";
 3import { IconBolt, IconShieldCheck, IconSparkles, IconUsers } from "@tabler/icons-react";
 4
 5export default function Example() {
 6  return (
 7    <GlassHopper
 8      intervalMs={2200}
 9      stackSize={3}
10      chips={[
11        {
12          id: "ready",
13          title: "Production Ready",
14          description: "Fully type-safe and tested",
15          icon: <IconShieldCheck className="size-5" stroke={1.75} />,
16        },
17        {
18          id: "motion",
19          title: "Fluid Motion",
20          description: "60fps optimizations built-in",
21          icon: <IconBolt className="size-5" stroke={1.75} />,
22        },
23        {
24          id: "a11y",
25          title: "Accessible",
26          description: "Works perfectly for everyone",
27          icon: <IconUsers className="size-5" stroke={1.75} />,
28        },
29        {
30          id: "design",
31          title: "Modern Design",
32          description: "Crafted for high-end feel",
33          icon: <IconSparkles className="size-5" stroke={1.75} />,
34        },
35      ]}
36    />
37  );
38}

Props

Prop	Type	Default	Description
`chips`	GlassHopperChip[]	-	Feature chips that cycle through the capsule. Each needs id, title, description, and icon. Pass at least one more chip than stackSize so the tray never repeats a stacked chip.
`intervalMs`	number	2200	Milliseconds between drops.
`paused`	boolean	false	Pause the drop loop without unmounting.
`stackSize`	number	3	Chips stacked inside the capsule, clamped to 2-5. Also sets the tube height.
`glassTint`	string	"#ffffff"	Tint for the glass tube, rim, and sheen.
`accentColor`	string	"#cd1c18"	Accent color for icon badges and the slot light.