AI CSS Animations

Encryption and Compliance Flow

A customer record's fields scramble one by one into ciphertext, sealed copies slide into a vault that locks, an audit trail logs each step with chained hashes, four compliance stamps press in, and a read without a key is denied.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
Canvas
Topics
SaaS promo · Explainer · Diagrams · Code
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Security promos have to show something that is invisible by design. Data security and privacy companies lean on a shared visual shorthand for it: readable text that scrambles into ciphertext, a lock that closes, a tamper-evident log and a row of compliance badges. Each piece answers a question a security reviewer will ask: is the data encrypted, who holds the keys, is every access recorded, and has an outside auditor checked the controls. The audit trail matters most to buyers in regulated fields such as health care and finance, where showing who accessed a record is often required. Clear versions use real field names and real algorithm names instead of hooded hackers and green code.

The prompt

Make a 10-second security promo for a data encryption product: a customer record's fields scramble one by one into ciphertext, sealed copies slide into a vault that locks, an audit trail logs each step with chained hashes, four compliance stamps press in, and a read without a key grant is denied and logged.

<inputs>
If I don't give you something, use the default and don't ask.
- Company: Sealwright (fictional), field-level encryption for application databases. Wordmark "SEALWRIGHT" beside an original mark: a wax-seal circle with a scalloped edge and a single vertical keyhole slot.
- Headline: "Every field, sealed." Subline: "Field-level encryption with a tamper-evident audit trail."
- Record: table "customers", id "cus_5521". Fields (label · value): NAME · Adaeze Okafor; EMAIL · adaeze.okafor@fernmail.net; PHONE · +44 20 7946 0321; DATE OF BIRTH · 1988-03-14; ADDRESS · 14 Calder Row, Leeds LS2 7PQ.
- Cipher: AES-256-GCM, key "k_eu_west_07", "rotated 12 days ago". Each ciphertext is "sw1:" followed by 30 seeded base64 characters and "…".
- Audit entries (time · actor · action · hash):
  1. 10:42:07.112 · svc-billing · Encrypted 5 fields on cus_5521 · 9c1e44a0
  2. 10:42:07.118 · svc-billing · Wrote record to customers · 3b7f02d9
  3. 10:42:07.120 · sealwright · Used key k_eu_west_07 to encrypt · e05a6c13
  4. 10:42:07.121 · sealwright · Sealed 5 of 5 fields · 71d9b8e2
  5. 10:44:51.006 · support-ana · Read cus_5521.email · DENIED (no key grant) · 2c8e5f97
  6. 10:44:51.007 · sealwright · Alert sent to #security · b4a03e6c
  Each entry after the first also shows the previous entry's hash ("prev 9c1e44a0").
- Stamps (text-only, original designs): "SOC 2" / "TYPE II", "ISO" / "27001", "HIPAA" / "READY", "GDPR" / "ALIGNED", each with the rim text "SEALWRIGHT · 2026 ·" repeated around it.
- Denied request chip: "support-ana · read email", which becomes "DENIED · no key grant".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a vault, not a hacker den. Warm black, brass and bone, like a private bank's engraved stationery brought to life; the type is wide and confident, and every step lands on a mechanical beat (one field every 0.36 s). Nothing glows: brass reads as metal through a fine linear sheen, not as light.
- Palette: background #13110E with a faint 64px grid in #1B1915 and fixed seeded grain at 2.5%; panels #1B1915 with 1px #2E2A23 borders, radius 14; bone #EDE5D3 for primary text; muted #8C8473; ciphertext #CDBF9E on blocks #201D18 with 1px #3A342A borders; brass #D6A453, with a sheen gradient #B98838 → #E9C47C → #B98838 across the lock, block edges, the chain and the stamps; oxide #D0573F used only for the denied read. No green, no blue, no cyan.
- Type: Archivo at width 125 and weight 800 for the headline (64px, tracking −0.01em), the wordmark (18px, tracked 0.2em) and the stamps' top lines (28px); Archivo at width 100 for the subline (400, 22px), field values (500, 24px) and audit actions (500, 17px), and the audit header (700, 22px); Space Mono 400 for labels, ciphertext, times and hashes (13–17px) and Space Mono 700 for tags and stamp rims (11–13px).
- Layout:
  - Headline at x 120, baseline y 140; subline at x 120, baseline y 182, in muted. The wordmark with its mark at the top right, right-aligned at x 1800, baseline y 112.
  - Record card x 120–640, y 240–780: header "customers / cus_5521" in Space Mono 15px muted at baseline y 280 over a 1px rule; five rows of 96px from y 300: the label (Space Mono 13px, uppercase, tracked 0.1em, muted) at x 148, baseline top + 28; the value at x 148, baseline top + 64. A sealed row becomes a ciphertext block at x 140–620 from top + 40 to top + 80, with a 3px brass edge on its left, the ciphertext in Space Mono 16px, and an "AES-256-GCM" tag in Space Mono 700 11px brass right-aligned at x 604 on the label line.
  - Vault x 740–1180, y 240–780: the label "VAULT · customers" in Space Mono 13px muted at the top; a slot area x 790–1130, y 300–560 where sealed copies stack, each a 340×40 block like the record's, the first resting at y 520–560 and each next one 48px higher; a brass padlock centered on x 960 with a 132×108 body (y 600–708, radius 14) and a shackle 84px wide and 14px thick; the key line under it at baseline y 744 in Space Mono 14px muted: "key k_eu_west_07 · rotated 12 days ago".
  - Audit trail x 1260–1800, y 240–1020: the header "Audit trail" with an "append-only" chip in Space Mono 12px; entries 112px tall from y 300, added at the bottom: line 1 holds the time (Space Mono 14px muted) and the actor (Space Mono 14px bone); line 2 the action; line 3 the hash in Space Mono 13px brass with "prev …" after it in muted. A 2px brass chain line runs down x 1284 joining 8px brass dots, one per entry.
  - Stamps: four 140px circles centered at y 900 on x 200, 380, 560 and 740.
- Sealing a field (0.45 s): the value scrambles left to right, each character flipping through 3 seeded base64 glyphs 40 ms apart before settling (0.3 s for the whole value); the line then resolves into its ciphertext, the block fills in behind it (0.15 s), the brass edge draws top to bottom and the tag stamps in (scale 1.2 → 1, 0.12 s). The row keeps its ciphertext for the rest of the piece. When the fifth row seals, the record header gains "5 of 5 sealed" in brass.
- Copies to the vault: 0.15 s after a row seals, a copy of its block lifts off it and travels on a gentle arc into the vault over 0.5 s (easeInOutCubic), narrowing from 480 to 340px, and settles into its slot with a 4px bounce.
- The lock: the padlock drops 80px into place (0.3 s, easeOutBack), then the shackle closes 22px downward (0.12 s, easeOutQuart) and a single brass ring expands from the lock (radius 0 → 70px, opacity 40% → 0 over 0.5 s); the vault label becomes "VAULT · customers · SEALED".
- Audit entries: each rises 12px and fades in over 0.3 s; its hash resolves from scrambled hex to the final value over 0.2 s; the chain line then extends down to its dot.
- Stamps: brass seals with a 3px outer ring and a 1px inner ring 8px inside it, the rim text set around the circle, the top line in Archivo and the second line in Space Mono 700 13px, each rotated by a seeded angle between −4° and 4° and printed through a fixed seeded speckle mask that removes about 8% of the ink, like a real rubber stamp. Each presses in from 1.35× scale to 1 over 0.18 s (easeOutQuart), and a ring of 12 brass dust specks drifts 20px outward and fades over 0.4 s.
- The denied read: the request chip (Space Mono 13px, bone on #2A2620, radius 13, 210×26) fades in at x 650–860, y 641–667, in the gap right of the record card, then pushes right until it touches the padlock's left side (x 684–894, easeInCubic 0.5 s), recoils 30px (easeOutBack 0.3 s), turns oxide with its denied text, and fades out over 0.6 s after holding 1 s. The lock does not move.
- Premium: real field names and believable values, a real algorithm and key naming, a hash chain that truly links each entry to the one before it, brass that reads as metal, one beat everything respects. Cheap: hooded hackers, green code rain, glowing padlocks, binary streams, shields with checkmarks, a spinning vault door, red alarms.
- Banned: real company names, logos and UI copied from existing products; the official marks or seals of any standards body or auditor (the stamps are text-only originals); code rain, binary rain, glow and lens flares; skulls and hooded figures; real-format card numbers or ID numbers; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: the grid and grain fade up; the headline's three words drop 20px and fade in, 0.08 s apart (easeOutQuart 0.5 s); the subline and wordmark fade in at 0.5 s; the three panel borders draw clockwise over 0.6 s.
- 0.8–1.1s: the record's labels and plaintext values fade in, 40 ms apart.
- 1.2–3.1s: the fields seal on the beat, starting at 1.2, 1.56, 1.92, 2.28 and 2.64 s; each copy leaves for the vault 0.15 s after its row seals and lands 0.5 s later (the last at about 3.75 s).
- 3.1s: audit entry 1; 3.5s: entry 2.
- 3.8–4.3s: the padlock drops at 3.8 s and the shackle closes at 4.05 s; entry 3 posts at 4.05 s and entry 4 at 4.3 s; the key line types in from 4.1 s at 60 characters per second.
- 4.8–5.6s: the stamps press in at 4.8, 5.0, 5.2 and 5.4 s.
- 6.0s: the poster: headline and subline, all five fields as ciphertext with their tags, five sealed copies in the vault under the closed padlock and its key line, four audit entries joined by the chain, four stamps.
- 6.4–7.4s: the denied read: the chip appears at 6.4 s, touches the lock at 6.9 s, recoils and turns oxide; entry 5 posts at 7.0 s with "DENIED (no key grant)" in oxide, and entry 6 at 7.3 s.
- 7.4–8.6s: the denied chip holds, then fades out by 8.6 s.
- 8.6–10.0s: hold; nothing moves (the grain is fixed).
For other lengths, keep the 0.36 s beat and stretch the gaps between stages; keep at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: the grain, the stamps' speckle and every shape are generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG (ciphertext, scramble glyphs, stamp angles and speckle). Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face (including Archivo at width 125) before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter; set Archivo's width through font-stretch on the canvas context (ctx.fontStretch) or a "@font-face" alias, and confirm it renders wide. The grid, grain and stamp speckle masks are painted once at load into offscreen canvases and composited each frame.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the five fields seal in order on the beat, ciphertext never overflows its block, all five copies sit in the vault without overlapping, the padlock is closed from 4.05 s on, each audit entry's "prev" matches the hash of the entry above it, the stamps read clearly through their speckle and look like original designs, oxide appears only on the denied read, nothing glows or flashes, the headline renders in wide Archivo, the 6.0 s frame matches the poster description, and the final frame shows everything with six audit entries and the chip gone. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

More like this on the motion design inspiration board: SaaS video inspirationExplainer video inspirationDiagram animation inspirationCode animation inspiration