Personal reels · design languageSelenite
A crystal named for the moon: pale, translucent, iridescent at the edge, cold to look at and warm in the hand. Every reel is one calm instrument on a ship at night, in the hour before dawn.
In plain words
Picture the hour before dawn, not the middle of the night. The screen is a warm, very dark plum, almost black, with a few stars slowly rising past. In the middle sits one circle of moonlight, like the halo behind the women in Mucha's posters, and inside that circle lives the thing that moves: your wellspring ripples, your sea stars, your breathing mandala. A small gold crescent sits on top of the circle like the jewel on Sailor Moon's tiara, and it glows a little brighter every time a new line of yours arrives, the way her transformation glow does, but gently, over a breath. Two thin ribbons fall from the moon's horns down either side, like strands of hair.
Around the rim of the circle, if you look closely, twenty-four tiny shapes turn from crescents into stars and back again without a join; that is the Escher part, and it also means each reel ends exactly where it began, so it loops forever. Down the left edge runs one of those rounded Star Trek console bars, but instead of orange it is patched in three soft pastels like a Desigual seam, ribbed like Giger's chrome, and it quietly reads which SWIM frame and lens the reel belongs to. Under everything, a slow liquid of pink, lilac, seafoam, periwinkle and starlight moves like the sheen on the inside of a shell, displaced by faint ribbed arches in the dark.
The words are yours alone: one line at a time, in a calm old-fashioned serif, centred under the circle with lots of air around it, the way Apple puts one sentence under one product. Once per reel, on the line that turns, a single ring of warm light opens from the centre and every tiny shape on the rim becomes a star for two seconds. Then it all settles. It is never busy. It is elegant, a little magical, and unmistakably yours, and it is not the purple nebula of your website or the night sea of Anam Cara.
01Palette
Thirteen tokens. The five accents appear together only in the halo band, the liquid inside the disc and the end card patchwork. Each reel has one lead accent chosen by its SWIM frame: Somatic starlight, Wisdom periwinkle, Interdependence seafoam, Metacognition rose.
02Typography
Two Google Fonts. Cormorant Garamond 400 and 400 italic for everything spoken. Jost 200, 400 and 500 for science, numerals, the rail and the name. Sizes below are true to the 1080 px stage and scale with this column. No bold, no capitals on anything spoken, no glow or shadow on text.
No story yet.
the why can wait.
and quietens the alarm beneath it.
| Use | Face | Size / leading | Case and tracking | Colour | Lines |
|---|---|---|---|---|---|
| Hook, declarative, antithesis turn | Cormorant Garamond 400 | 84 / 1.08 | Sentence case, full stop kept, tracking -0.01em | ink | max 3 (2 with a science caption) |
| Guided line, inner voice | Cormorant Garamond 400 italic | 66 / 1.16 | Lowercase, ellipsis as breath mark | ink | max 2 |
| Landing line | Cormorant Garamond 400 italic | 72 / 1.12 | Lowercase or as scripted | ink, one word may wear the gradient | max 2 |
| Science caption | Jost 400 | 34 / 1.4 | Sentence case, +0.01em. Never below 34. | ink at 78% | max 2 |
| Attribution | Jost 400 | 26 / 1.3 | Uppercase, +0.20em | ink-dim | 1 |
| Counter | Jost 200 | 112 / 1 | Numerals only, 68 px cells | ink at 90% | 1 |
| Rail readout | Jost 500 | 18 / 1 | Uppercase, +0.24em | ground on the lit cell; ink-dim on the arm | 1 |
| End card name | Jost 500 | 34 / 1 | Uppercase, +0.32em | ink | 1 |
| End card title | Cormorant Garamond 400 italic | 60 / 1.1 | As written | ink | max 2 |
| End card handle and footer | Jost 400 | 26 / 1.5 | Lowercase, +0.02em | ink-dim | 1 each |
03Motif library
Each motif is a small drawing function in the engine, taking stage coordinates and an alpha. They are drawn live here by the same code.
04The signature frame
Shared by every reel, to the pixel. 1080 x 1920, shown scaled down and idling as it does in the engine: the band sweeping, the glyph ring turning, the crescent breathing, the ribbons swaying. The guides mark the text zones.
No story yet.
- Ground. #140F1B with a radial vignette to #0B0811, ellipse centred (540, 860).
- Starfield. 140 points, a 1080 x 240 tile drifting upward one tile per reel. Three fixed sparkles in starlight.
- Halo at (540, 720). Inner ring r 380 in ink-dim at 45%. Band r 380 to 418, the five accents at 18%, one turn per half reel, 24 px gap at twelve. Glyph ring r 418: twenty-four crescent-to-star glyphs turning one glyph per reel. Diadem r 446, the sheen at 55%, the crown only.
- Crescent at (540, 302), r 30, starlight, horns to the upper right. Resting rose glow 12 px; bloom to 60 px on each new line.
- Ribbons. Two hair lines from the horns to the rail elbow and to a sparkle at (996, 1126). Sway 3 px.
- Rail. x 48 to 72, y 120 to the elbow at 1114, three segments (rose, lilac, periwinkle) at 0.30 with 8 px gaps, ribbed at 14 px; arm to x 700 with the readout; end cell in the lead accent, outline at rest.
- The weave. The ring passes over the arm at x 441 and under it at x 639.
- Text column x 140 to 940. Zone A y 1170 to 1450 (centred 1310; 1270 when Zone B is lit). Zone B y 1400 to 1492.
- Counter at (540, 1000) inside the disc.
- Foot band y 1640 to 1920: the hexagon-to-crescent frieze at 7%. The one still thing. No text here, ever.
05Motion
One easing curve for everything that is not a continuous rotation: the exhale, cubic-bezier(0.33, 0, 0.12, 1).
- Text in 1.6 s, opacity with a 10 px rise. Text out 1.2 s, opacity only. 0.4 s of empty air between lines.
- Science caption holds at least 4 s. Any beat holds at least 2.4 s.
- Crescent bloom 1.4 s (0.5 up, 0.9 down), beginning 0.2 s before the line.
- End cell 0.9 s outline to solid; 1.2 s back.
- Rail segment 1.2 s from 0.30 to 0.55 and back.
- Counter 0.3 s crossfade. The only fast motion. Never sliding, rolling or springing.
- Transformation bloom, once per reel: an ember ring r 0 to 400 over 1.6 s; every glyph a star for 2 s; the sheen 20% brighter; the band 18% to 32%; settling over 3.6 s. On the antithesis turn or the landing line only.
- Warp, end card only: stars to 40 px streaks, 0.4 s out, 0.4 s hold, 0.4 s settle.
- Nothing else under 1.2 s. No springs, no bounce, no snap, no karaoke.
- What idles. Starfield one tile per reel. Band one turn per half reel. Glyph ring one glyph per reel. Crescent breathes 4% and ribbons sway 3 px at T / 5. Sheen slides there and back at the T / n nearest 18 s. Liquid one cycle per reel. Ribs breathe 0.02 in alpha at T / 3.
- The Escher loop rule. Every period is T / n for an integer n. The mechanic ends in the rest state it began in. The last 1.5 s of T is empty air. Frame T is frame 0 to the pixel; never fade to black to hide a seam.
- The end card lives inside T, the final 3.3 s. Title last, inside the disc. Name, handle, footer below the halo. No call to action, no arrow, no logo. The crescent is the signature.
- In the engine, parameters ease toward targets with k = 1 - exp(-dt * 0.9); events set targets. The crescent, the bloom, the warp and the counter run on timestamps with the exhale envelope.
06Ten rules
Do
- Keep one line on screen at a time, three lines maximum, 800 px column, centred, two zones lit at the ceiling.
- Put the mechanic inside the halo and let it continue dimly beyond it.
- Use the five accents together only in the band, the liquid inside the disc and the end card patchwork.
- Let one lead accent per reel carry the end cell, the mechanic and the emphasised word.
- Let the crescent flare for every new line and the transformation bloom fire once.
- Keep the ground #140F1B and the frame geometry fixed to the pixel in every reel.
- Set numerals in Jost 200 in fixed cells and every spoken line in Cormorant 400.
- Phase-lock every period to the reel length so frame T is frame 0, with the glyph ring one glyph further round.
- Keep texture below 12% and the glyph ring at 40%.
- Pass the one-second test on a phone (moon, halo, rail, one line) and read every line aloud slowly as one therapist to another.
Don't
- Stack a hook, a guided line and a caption; if three things want the screen, cut one.
- Let the halo become a panel or a border, and never run a scene full bleed; that is the Anam Cara language.
- Run a rainbow through text, particles or backgrounds; no gradient text except the one word per reel.
- Paint the SWIM site colours, Nexus orchid or Anam Cara Night Sea anywhere; the frame is spoken on the rail, not coloured.
- Add a second bloom, a flash, a lens flare, a shake, or warm colour anywhere outside the bloom and the end cell.
- Drift toward navy, nebula purple or a light mode, and never resize the halo or move the rail to fit copy; cut the copy.
- Animate numbers by sliding or rolling, set a felt line in capitals, or use bold anywhere.
- Fade to black to hide a seam or end on a card the loop has to jump over.
- Let Giger become a creature, Escher become the subject or Desigual become a print; they are frame, floor and seam.
- Ship a frame that needs a second look to find the words, and never use em dashes, exclamation marks, "unlock", "elevate", "transformational" or any promise.