Foundry Cipher
A scramble-reveal card: churning angular neutral glyphs on near-black, with a soft-edged diamond aperture that follows the cursor and resolves glyphs at its center to bright white. A static title sits on top regardless of hover, and keyboard focus opens the aperture dead-center.
canvaspro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/foundry-cipherProps
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Card content, rendered above the glyph field (bottom-aligned copy works well). | |
| title | string | Static label pinned dead-center over the field, visible regardless of hover. | |
| revealRadius | number | 130 | Half-diagonal of the diamond aperture in px — the distance from the pointer at which glyphs cool back to dormant. |
| charset | string | Characters the field churns through. Angular foundry stampings by default. | |
| churnSpeed | number | 1 | Churn rate multiplier. 1 = default simmer, 2 = twice as fast. |
| colors | [string, string, string] | a neutral silver ramp | [cold, mid, bright] — dormant glyph color, the mid ring of the aperture, and the white-bright center. |
| cellSize | number | 16 | Glyph cell size in px. Bigger = coarser stampings. |
| heat | number | 1 | 0–1 master intensity: aperture glow, glyph brightness, churn energy. |
| paused | boolean | Freeze the churn at its current frame (aperture still follows the pointer). | |
| seed | number | 7 | Deterministic seed for the initial glyph layout. |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.