Hero String Envelope

Heroes

About

A full-bleed animated hero background made of straight SVG chords across a circle whose density forms a glowing epicycloid curve, with the cusp count morphing as the cursor moves horizontally.

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

Code

How Hero String Envelope is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import HeroStringEnvelope from "@/components/ui/hero-string-envelope";

export default function HeroStringEnvelopeDemo() {
  return (
    <HeroStringEnvelope
      eyebrow="ENVELOPE-01 / K = 3, NEPHROID"
      headline={["Nothing here", "is a curve"]}
      subcopy="Every mark on this page is a straight line between two points on a circle. The bright edge is where they crowd — an epicycloid nobody drew. Slide across the hero and the multiplier moves with you."
      primaryCta={{ label: "Read the construction", href: "#" }}
      secondaryCta={{ label: "Copy the component", href: "#" }}
      className="h-screen w-full"
    />
  );
}