Anatomy of Encrypted Card

How a radial mask and a re-scrambling glyph stream turn a static card into a live ciphertext reveal that follows the pointer.

↓Scroll to step through it

Stream under, content over

EncryptedCard doesn't animate ciphertext across the surface — it keeps a full glyph field painted underneath the content and reveals it through a soft radial mask centered on the pointer. Two layers, one CSS variable pair, and an interval that only runs while you hover.

The root is a group relative overflow-hidden card. An absolute, aria-hidden glyph layer fills the inset with STREAM_LEN (1500) characters drawn from DEFAULT_CHARS. Children sit in a sibling at z-raised, so real content never fights the stream for stacking order.

The stream is filled client-side on mount so SSR markup stays deterministic — randomString never runs during the first server render.

The reveal is a mask, not a clip of content

Pointer position never moves the glyphs. onPointerMove writes --x and --y as pixel offsets from the card's bounding rect; the stream's mask-image is a radial gradient whose center reads those variables (and --reveal for radius). Defaults are 50% / 50%, so the first paint isn't a corner flash.

Opacity is separate from the mask: the stream starts at opacity-0 and fades to --stream-opacity on group-hover over 300ms. The mask only decides where the faded-in stream is visible.

Scramble only while hovered

While hovered is true and reduced motion is off, a setInterval re-rolls the entire 1500-character string every speed ms (default 55). Leaving the card clears the interval; entering starts it again. That's why the ciphertext looks alive under the spotlight without a forever-running timer in the background.

The result

Hover the card and move across it — the spotlight and the scramble are the same two mechanisms from above.

One glyph field, one radial mask on --x/--y, and an interval that only lives for the length of the hover.

01/04Stream under, content over

Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%Ab3<x9#Zm2[]kL7*/$qW4{yP8}nH1%

Glyph stream: absolute inset-0 · STREAM_LEN 1500 · aria-hidden
Content: relative z-raised — children always on top

tsx

<div className="group relative overflow-hidden …"><div aria-hidden className={STREAM_BASE} style={{ color: streamColor }}>  {stream}</div><div className="relative z-raised">{children}</div></div>

Anatomy of Encrypted Card

How a radial mask and a re-scrambling glyph stream turn a static card into a live ciphertext reveal that follows the pointer.

01/04Stream under, content over

Glyph stream: absolute inset-0 · STREAM_LEN 1500 · aria-hidden
Content: relative z-raised — children always on top

tsx

<div className="group relative overflow-hidden …"><div aria-hidden className={STREAM_BASE} style={{ color: streamColor }}>  {stream}</div><div className="relative z-raised">{children}</div></div>

Stream under, content over

The stream is filled client-side on mount so SSR markup stays deterministic — randomString never runs during the first server render.

02/04The reveal is a mask, not a clip of content

Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%Xy7#mK2<pQ9[]aZ4*/$nB6{wR1}tH8%

mask-image: radial-gradient(var(--reveal) circle at var(--x) var(--y), #000, transparent)

Stream (full): always painted · opacity gated by group-hover
Radial mask: #000 inside → transparent outside · reveals, doesn't hide

tsx

el.style.setProperty("--x", `${e.clientX - rect.left}px`);el.style.setProperty("--y", `${e.clientY - rect.top}px`);// STREAM_BASE includes:// [mask-image:radial-gradient(var(--reveal) circle at var(--x,50%) var(--y,50%),#000_0%,transparent_100%)]

The reveal is a mask, not a clip of content

Opacity is separate from the mask: the stream starts at opacity-0 and fades to --stream-opacity on group-hover over 300ms. The mask only decides where the faded-in stream is visible.

03/04Scramble only while hovered

ORBwd1cGmr}}6eOW2#z8BbSEZKXujRo/#{pc%uMpgUrz<fS<OPYZ*KHKPb7V4EoA6c<H8yQA3o}N{hqjrZPyOkMEy{JVsQ4KMB4NnnXTfufGi0UtCjHMu9ZHrGvs]F94GQ3o&JcB/W2V26]Gb<3*$QLn$BZ5c}RaOhjYrIjtsFGQij*dSzyNoR<Z2zYs]wn1rXWtizf%3*17<q{&>o$pN7gVD$L$On$]gY6q6gztrRML<jffvP%yl3J9Bx#cpKB/>OT8s[e9k549LdcvQIy<8PYWZ2XGj}uEtlc}FAn}z/GSHoq$m8[FF5Zy6wwDl8kLy%w5KMe/Gonq8[6[2$5/8oTa6DZX4Ye]QPJU3rc4U}q]gyErXiy45n&[jKh91GB8%fuyQgVuyA7ju%/U/r&*cZ87WExmbZbwscR/r]osF07THq[ikNzW0Ax8M*TpGjJS{v{o137ZfvX5ctdrbfZJsLhzLmnKOC<QxYX0uU[0KLY2v$<6m[W}N0S#j8vv8*TXEbihCzVeiLgc0O]eP{2gqq5Yly#5DT<kdXEzSTaNJ7u2mGN2CGkRF>ZbEMSZW]3PKo{dTtDrKWI[}zix}RLbJ6Q94jQxo]Xgj8R63gUzUKlG0NGO0m/ANjCffX4&A<QQB#<[snH7TN[SDYE]b/wsLWUWic]qFWh1$51$ESQgRD5$[<]XQ%MwuR91uDpnA[$&6rBdn*U6aWo5&B[sQSGFfgZgNP4pxnApN<6zj[3zwfcZBIGvp4Nci375/ynX#oaG/{yjj0}s0qc4LeC3lz$*{uvX8R6cwos*rqfzFaToc4wzRr]%G]]SBxV]2Mx9TdbZo5yHIN&#9H1k76Gvsn[B*2%AJ$miM2ZWbsxV0h1DDE<71oK141X13V8W%ZoM%bGnVUHbD&q]A701<iis5}iu7WtwNm>ikFegC]614jxGg5<Vd{vGmr/226AmJt>Dt/yqHtV>}t&}xgdxB6vCyNEZwO{9Ni1}HlLWQa[{8Db2[7bx>VX]M]}frlI3*Ks5LJ5yAtEvAcIh*6J#RUjakA7PkY65}ylY2*[USFDJzK#%mvbPKqxILF1E8mYcPxtJ{%n[ejlO8/mXVjd1OrLPdiaexaJo$CS0AJX5X78fNYk%A7puLrK}>5[#R5xQ#RjF43a#49Mq7q#]zaoQbze1*Z2G7LPXm%%FlAL2Rrf#]<RY/VH2{FwilcS]YkDgkqN${v]o0t9odcsjgCZWI8rnkHG]$GdVbICd7yBY$m9FRgNWR]%b9<bfeWniZvxx3eoY&IVK3JI7MOPJTEB1RFLBAaR/Db1niQTiiZ2C<[M5h{hAPnjh66mK8c1B%CUmkYW7LeSeU1#YIXdWXnMia/95B0G>oO>UggFHMOaK3e3aIyVT4JGKCoQ90yBUIg6*O7&3jYgx$t2IpQZnMABoqyN54*%r/ldG2U<<gWWAVa7ZLrqQ4#5K]mlSU>lI7vf]LY8T>AsoTQ&qRu]f6LC1vPZ1X[eG*S0{UrI7

setInterval(() => setStream(randomString(1500, chars)), speed)

Opacity in: 300ms ease · group-hover:[opacity:var(--stream-opacity)]
Re-randomize: setInterval(speed) · default 55ms · glyphs change, opacity steady

tsx

React.useEffect(() => {setStream(randomString(STREAM_LEN, characters));if (reduced || !hovered) return;const id = window.setInterval(() => {  setStream(randomString(STREAM_LEN, characters));}, speed);return () => window.clearInterval(id);}, [characters, speed, hovered, reduced]);

Scramble only while hovered

04/04Result

Production API key

rotated 3 days ago

Live

sk_live_51Nc••••••••4Rf2

AES-256-GCM at restSOC 2

The result

Hover the card and move across it — the spotlight and the scramble are the same two mechanisms from above.

One glyph field, one radial mask on --x/--y, and an interval that only lives for the length of the hover.

Reduced motion

Under prefers-reduced-motion, the stream still paints and the mask still tracks — you can see the ciphertext — but the interval never starts, and motion-reduce:[transition:none] kills the 300ms opacity fade. Reveal without the tick.

tsx

const reduced = usePrefersReducedMotion();
// …interval skipped when reduced || !hovered
// STREAM_BASE: motion-reduce:[transition:none]

Motion Score

Encrypted CardSS — Compositor-only

SopacityFade / cross-fadeWorst → grade

Each property is graded by how the browser runs it, from S (composited off the main thread) down to F (layout thrashing); the component takes the worst. MotionScore methodology →