Ribbon Drift

A dynamic hero showcase card featuring dual floating infinite marquee ribbons, an animated ambient gradient drift backdrop, center 3D illustration, and an interactive frosted glass promo card.

Originally created as the signature visual counterpart for authentication layouts, it is completely decoupled as a standalone visual card that works across landing pages, feature highlights, onboarding heroes, and product showcase sections.

Ribbon Drift Card

Dual infinite marquee ribbons, central 3D character, ambient gradient drift, and frosted promo card.

Setcolor"primary" | "indigo" | "rose" | "emerald" | "amber" | "violet" | "zinc": tunes the ambient glow gradient, diamond separators, and hover accents.
ribbonsTop: items rendered in the top ribbon (-7deg tilt, drifting left).
ribbonsBottom: items rendered in the bottom ribbon (+5deg tilt, drifting right).

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @avara-ui registry once, then copy your styles from the Themes page.

Install Ribbon Drift

npx shadcn@latest add https://avaraui.com/r/ribbon-drift.json

components/custom/blocks/RibbonDriftBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Ribbon Drift to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component. @radix-ui/react-avatar and motion come in with the component above rather than from Ribbon Drift directly.

avatar-stack is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add https://avaraui.com/r/avatar-stack.json

@radix-ui/react-avatar and motion are npm packages.

npm install @radix-ui/react-avatar motion

Props Reference

Component	Prop	Type	Default	Description
`RibbonDriftBlock`	`image`	`string`	`defaultImage`	Central illustration URL positioned between the layered ribbons.
`RibbonDriftBlock`	`imageAlt`	`string`	`"Feature illustration"`	Accessible alt text for the central illustration.
`RibbonDriftBlock`	`ribbonsTop`	`string[]`	`defaultRibbonsTop`	Items scrolling in the upper ribbon (tilted at -7deg, drifting left).
`RibbonDriftBlock`	`ribbonsBottom`	`string[]`	`defaultRibbonsBottom`	Items scrolling in the lower ribbon (tilted at +5deg in reverse direction).
`RibbonDriftBlock`	`promo`	`RibbonDriftPromo \| null`	`defaultPromo`	Floating frosted badge at the bottom featuring an interactive AvatarStack (spring-shift on hover with tooltip) and arrow link (pass `null` to hide).
`RibbonDriftBlock`	`color`	`RibbonDriftColor`	`"primary"`	Color theme palette (`"primary"`, `"indigo"`, `"rose"`, `"emerald"`, `"amber"`, `"violet"`, `"zinc"`).
`RibbonDriftBlock`	`badge`	`ReactNode`	`undefined`	Custom badge or logo node rendered in the top-right frosted pill.
`RibbonDriftBlock`	`logoConfig`	`RibbonDriftLogo`	`{ brandName: "Avara", brandAccent: "UI" }`	Configuration options for the top-right pill badge.
`RibbonDriftBlock`	`rounded`	`string \| number`	`"rounded-3xl"`	Corner radius for the outer card and promo card (e.g. `24`, `"2rem"`, `"rounded-3xl"`).
`RibbonDriftBlock`	`marqueeDuration`	`number`	`48`	Loop duration in seconds for the marquee ribbons.
`RibbonDriftBlock`	`pauseOnHover`	`boolean`	`false`	Whether the marquee animation pauses when hovering over the card.
`RibbonDriftBlock`	`className`	`string`	`undefined`	Custom Tailwind CSS classes applied to the root card container.