ns-ui / loud
A hero backdrop of a true Penrose P3 rhomb quasicrystal built by Robinson-triangle substitution, drifting through a seamless golden-ratio infinite zoom, with the pointer acting as an inflation lens that resolves the tiling one substitution level finer under the cursor.
Use when Pick hero-penrose-inflate when the hero backdrop should be a real aperiodic structure — hairline fat and thin rhombi with unmistakable five-fold symmetry and no translational repeat — that reads as mathematics rather than decoration, and where the pointer's job is to resolve more of that structure rather than disturb it; hero-isobar-contours is the better pick when the field's whole job is to point at the CTA, and hero-vortex-street when the pointer should stir a fluid rather than magnify a lattice.
Install
npx shadcn add https://design.helpmarq.comns-ui / hero-penrose-inflate
move the pointer — the tiling inflates one substitution level finer under the cursor
P3 / APERIODIC
Two rhombi and a single substitution rule generate a pattern with five-fold symmetry that never repeats itself, at any scale, anywhere. The field below is drifting through an endless golden-ratio zoom into its own structure.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow? | string | — | — |
| headline? | string[] | — | each entry is one rendered line of the h1 |
| subcopy? | string | — | — |
| primaryCta? | { label: string; href: string } | — | — |
| secondaryCta? | { label: string; href: string } | — | — |
| depth? | number | — | substitution depth of the resting tiling; clamped to 1..7 |
| period? | number | — | ms for one full phi-ratio zoom cycle |
| className? | string | — | — |