Kedhareswer Naidu

Crimson Confessional

Heroes 4

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>
  )
}

More by Kedhareswer Naidu

View all
  • Glassmorphism Folder Cards

    Glassmorphism Folder Cards

    2.7K
  • GitHub Contribution Graph 3D Heatmap

    GitHub Contribution Graph 3D Heatmap

    1.8K
  • Morph Gallery

    Morph Gallery

    1.4K
  • Halftone Wordmark Footer

    Halftone Wordmark Footer

    1.2K
  • Hanging Polaroid Image Carousel

    Hanging Polaroid Image Carousel

    721
  • Glass Cards

    Glass Cards

    717
  • Particle Animation

    Particle Animation

    645
  • Tiger Tear Reveal

    Tiger Tear Reveal

    639

More in Heroes

View all
  • SaaS Template

    SaaS Template

    2.4K
  • Responsive Hero Banner

    Responsive Hero Banner

    2K
  • Hero

    Hero

    1.2K
  • Centered Hero with Image Fan

    Centered Hero with Image Fan

    932
  • Editorial Collage Hero

    Editorial Collage Hero

    431
  • Glass Fold

    Glass Fold

    213
  • Minimalist Hero Fashion

    Minimalist Hero Fashion

    285
  • HeroSectionWithGradient

    HeroSectionWithGradient

    336