Torch Reveal

Component 28

About

A cursor-tracked torch that wipes a hidden layer into view through a soft mask — hover to light up the surface underneath.

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

Code

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

Usage.tsx

"use client";

import { TorchReveal } from "@/components/ui/torch-reveal";

export default function TorchRevealDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <TorchReveal
        className="w-full max-w-2xl overflow-hidden rounded-2xl border border-[var(--motiq-border)]"
        radius={190}
        softness={0.55}
        flicker={0.25}
        idlePatrol
        front={
          <div className="flex min-h-[340px] flex-col items-center justify-center gap-3 bg-[var(--motiq-surface)] px-8 text-center">
            <p className="text-3xl font-semibold tracking-tight text-[var(--motiq-fg)]">
              The finished surface
            </p>
            <p className="max-w-sm text-sm text-[var(--motiq-muted)]">
              Move your cursor across the panel to inspect the build underneath.
            </p>
          </div>
        }
        reveal={
          /* Offset from the front layer's centred headline: with both blocks in
             the same place, a half-lit torch reads as overlapping garbage. */
          <div
            className="flex min-h-[340px] flex-col items-start justify-end gap-2 px-8 pb-8"
            style={{
              backgroundColor: "var(--motiq-accent)",
              backgroundImage:
                "linear-gradient(rgba(255,255,255,0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.22) 1px, transparent 1px)",
              backgroundSize: "28px 28px",
            }}
          >
            <p className="font-mono text-3xl font-semibold tracking-tight text-white">
              the blueprint
            </p>
            <p className="max-w-sm font-mono text-sm text-white/80">
              A radial alpha mask, three custom properties per frame, zero layout.
            </p>
          </div>
        }
      />
    </div>
  );
}