About
Noir scroll storytelling animation: seven one-word chapters over a procedural canvas, from a light cone and marionette strings to falling glyphs, CRT static and a collapse to a point. Scroll is the timeline, so scrubbing back runs it backwards. Red and black, zero dependencies, no assets.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Crimson Confessional to your project and fits it to your theme.
Code
How Crimson Confessional is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client"
import CrimsonConfessional from "@/components/ui/crimson-confessional"
export default function Demo() {
// w-full is load-bearing: 21st centres every demo in a flex wrapper, and a
// flex item left at width:auto shrinks to fit its contents — which, with a
// child asking for 100%, resolves to 0px wide.
return (
<div className="w-full">
<CrimsonConfessional />
</div>
)
}
















