Tiger Tear Reveal

Heroes 623

About

Scroll-driven paper tear hero reveal: a big slogan word cracks and rips in two, the torn halves pull apart and a tiger rises from behind, then its eyes follow the pointer and blink. All SVG from code, no images or dependencies; word, tagline and colours are props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tiger Tear Reveal to your project and fits it to your theme.

Code

How Tiger Tear Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import TigerTearReveal from "@/components/ui/tiger-tear-reveal"

export default function Demo() {
  return (
    // w-full: 21st centres demos in a flex wrapper that would shrink this to 0px.
    <div className="w-full">
      <TigerTearReveal />
      <section className="flex h-[60svh] w-full items-center justify-center bg-[#f2f1ee] px-6 text-center">
        <p className="max-w-md font-mono text-xs uppercase leading-relaxed tracking-[0.3em] text-neutral-500">
          Scroll back up to close it again.
        </p>
      </section>
    </div>
  )
}