Floret Pack

Heroes

About

A full-bleed animated hero background where dots are birthed one at a time from a center point and spiral outward using the golden angle, growing into a botanical phyllotaxis pattern instead of a static generated layout.

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

Code

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

Usage.tsx

import FloretPack from "@/components/ui/floret-pack";

export default function FloretPackDemo() {
  return (
    <FloretPack className="h-screen">
      <h2 className="text-2xl font-semibold tracking-tight">
        Grown, not generated
      </h2>
      <p className="text-sm text-muted-foreground">
        Every primordium is birthed at the meristem, golden-angle sequenced, and
        relaxed into place as it advects outward toward the rim.
      </p>
    </FloretPack>
  );
}