---
id: "2115722207989313705"
source: https://x.com/kitasenjudesign/status/2115722207989313705
author: "Kitasenju Design (@kitasenjudesign)"
media: "video, 3008x1794, 9.9s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Shattering Striped Clock Numerals

## Summary
A large white digital time readout on black that progressively breaks apart: first into displaced horizontal slices, then into stripes, then into a storm of thin triangular shards until the digits are barely legible. It is a sharp study in typographic destruction where a single glyph set and a slicing rule build a 10 second crescendo.

## Style
- Theme: dark (white type on near-black)
- Mood: glitchy, kinetic, tense, raw
- Tags: kinetic-type, glitch, shatter, slice-effect, clock, monochrome, generative
- Category: Typography, Motion

## Palette
| Role | Hex |
|---|---|
| Background | #0D0D0D |
| Flash background | #232323 |
| Glyph white | #E5E5E5 |
| Edge grey | #888888 |
| Shard shadow | #171717 |
| Deep black | #050505 |

## Typography
- One display style: four digits and a colon in a heavy neo-grotesque (bold, about 700), tabular numerals, tight tracking. Cap height about 45% of the frame; the readout spans about 80% of the width. Closest free: Inter Tight 700 or Arimo 700.
- No other text.

## Layout
- About 1.68:1 (3008x1794). The time is centred horizontally and vertically on a flat black field with no other elements.
- As the effect builds, fragments exceed the original bounds and touch the top and bottom edges.
- No borders, radii or shadows; contrast comes only from white against black.

## Elements
- Clean readout: crisp white digits.
- Slices: horizontal bands about 8% of the glyph height, each offset up or down by 5% to 20% with ghost copies peeking above and below.
- Stripes: glyphs reduced to horizontal bars about 8px thick with 6px gaps, some bars tilted a few degrees.
- Shards: long thin triangles cut from the stripes, rotated randomly, clustering inside the original glyph silhouettes.
- Background flash: at the striped stage the field lifts briefly to #232323.

## Motion
- 0.4s: the intact time.
- 2.2s: slices start sliding vertically; the 7 tilts slightly; duplicates offset above and below.
- 4.0s: background flashes grey; every glyph becomes striped with a few angled bars.
- 5.7s: stripes fracture into triangles that scale up and drift outward.
- 7.5s: shards rotate chaotically; only the silhouettes of the digits remain readable.
- 9.3s: a dense noise of white shards fills most of the frame.
- The intensity ramps roughly linearly over about 9s; shards jitter at a stepped 12 to 15 fps rather than smooth tweening. No loop is shown.

## Rebuild it
1. Render the time in a full-screen section (`bg-[#0D0D0D] grid place-items-center`) with `text-[40vh] font-bold tracking-tight` in Inter Tight.
2. Draw it to an offscreen canvas, then rebuild it on a visible canvas as N horizontal strips (`drawImage` with source rect per strip) so each strip can be offset.
3. Drive a single `progress` value from 0 to 1 over 9s with Motion `animate(0, 1, { duration: 9, ease: "linear", onUpdate })`.
4. Map progress to effects: 0 to 0.3 strip offsets (random `y` up to 20% of glyph height), 0.3 to 0.5 stripe masking (skip every other 6px band), 0.5 to 1 triangulation.
5. For shards, sample triangles inside the glyph alpha mask, and per frame set rotation `r = rand() * progress * 180deg` and scale `1 + progress * 2`.
6. Throttle redraws to 14 fps (`if (t - last < 70) return`) for the stepped glitch feel.

## Generation prompt
A large white bold digital clock readout centred on a pure black background that progressively glitches: horizontal slices shift up and down, the digits turn into thin horizontal stripes, then shatter into hundreds of thin white triangular shards spinning inside the outlines of the numbers; monochrome, high contrast, kinetic typography, stepped glitch motion.