SACRED.COMPUTER x HYPERFRAMES ▪

A 47-second motion odyssey in one HTML file. No build. No install. No mercy.

A terminal boots. A desktop assembles itself, character by character. The camera pulls back and reveals it was one screen in a living wall of twenty. The wall folds into the Flower of Life. The flower ignites into a spinning torus mandala. The torus unravels into a swimming tentacle creature. The creature freezes, gets scanned into its own design-system spec sheet, and signs its name.

Every frame is a pure function of time. You can scrub it, export it, or just stare at it.

---

🚀 Quick start

1. Download index.html
2. Open it in a browser (Chrome/Edge recommended)
3. That's it. That was the whole tutorial.

It needs internet on first load (GSAP + the IBM Plex Mono webfont come from CDNs) — everything else lives inside the file.

Transport controls (when opened directly):

Key	Does
Space	play / pause
→ / ←	seek ±1 second
0	restart

---

🎬 What you're watching

Time	Act
0:00–0:03	$ srcl --boot — typed commands, OK lines, a braille block-loader
0:03–0:20	A terminal desktop assembles: tree view, README, system monitor with █░ progress bars, data table, and a unicode chessboard that plays a real opening
0:17	A double-bordered ALERT modal (with ▓ drop shadow, obviously) confirms all is well
0:20–0:28	$ srcl --gallery --all — the camera pulls back and the desktop turns out to be one tile in a 5×4 wall of 20 living screens: DNA database, MU/TH/UR 6000, core dump, telemetry, calendar, glyph specimen, stacked modals… each one sprouting and self-assembling
0:29–0:33	The sacred-geometry payoff: each screen lifts off with its own pixels traveling inside its frame, spirals along a polar arc, and docks as one of the 19 petals of the Flower of Life. The main desktop folds into the enclosing circle last.
0:33–0:37	A deep-blue gradient washes in and each torus circle is born on its nearest petal, peels off clockwise, and reddens in flight — leaving a slowly spinning 50-circle torus mandala
0:38–0:42	Every torus circle passes through the pattern center — so 18 of them unroll into the arms of an inverse-kinematics tentacle creature that gathers itself together and swims off on a Lissajous orbit, trailing ghosts
0:42–0:47	The creature freezes mid-pose. A scanline sweeps across, converting it — in place — into its own design-system spec sheet: dashed bounds, dimension line, component callouts. Then the name types out: SACRED.COMPUTER ▪

---

🔧 How it works (the fun parts)

• A character-grid compositor. The terminal phases render on a 5×4 world of 130×39 character screens (698×180 cells), rasterized per-cell to canvas through a viewport-culled camera. Per-cell glyph placement means font-fallback quirks can't drift the columns.
• Everything is f(t). One paused GSAP timeline acts as the clock, and every frame — typing, spinners, camera, morphs, physics — is computed from t with zero accumulated state. Seek anywhere; you get the same pixels.
• The morphs inherit geometry. Screens become petals because their pixels travel inside the morphing frame. Torus circles are born ON petals. Tentacles are born ON torus circles (whose shared center point becomes the creature's attachment). Nothing crossfades; everything transforms.
• The stateful bit is precomputed. The tentacle creature is a real inverse-kinematics simulation (rigid stick constraints + spring/gravity/viscosity). Sims can't be evaluated at arbitrary t — so the entire history is computed once at load into Float32Array snapshots, and playback is pure lookup with 0.7^age trail ghosts.
• Determinism was fought for. Pre-scaled assets, no wall-clock CSS animations, gradients on isolated layers, coplanar z-fight fixes. This file has survived hundreds of byte-identical seek round-trip verifications.

🎥 Render it to video

This file speaks the Hyperframes contract (#root metadata + window.__timelines.main + hf-seek), so the Hyperframes engine can capture it frame-by-frame into an actual MP4 — frame-accurate, no screen recording.

🎨 Remix it

Everything interesting is a named constant near the top of the script. A few good knobs:

Constant	What it does
ZOOM_A / ZOOM_B / ZOOM_END	when and how far the camera pulls back
MORPH_T, MORPH_STAG, MORPH_DUR	the wall→flower fold timing
TOR_N, TOR_R	how many torus circles, how big
SIM_T0, SIM_FREEZE	when the creature wakes and when it freezes
GENS	the array of wall-screen generators — add your own panel

🙏 Credits

• Aesthetic tribute: SRCL / sacred.computer by Internet Development Studio Company — terminal aesthetics for the web
• Render contract: Hyperframes by the HeyGen team
• Sacred geometry & tentacle inspirations: the CodePen generative community
• Direction & motion: Ray Velez · Motion By Pasco Web Designs

📄 License

MIT © Ray Velez