الألغاز الخمسة · مكتبة عناصر البث
Broadcast Component Library
On-air graphics for The Five Enigmas, built in plain HTML, CSS and JS. Hover a component to play it, click it to open its full sheet, and copy the HTML or the AI brief straight to the developer.
Foundations
Brand book → broadcast tokens. Shared by every component.
Brand palette, then the metal ramp sampled from the endcap PNG. Click a swatch to copy its hex.
Metal
Options · TT Neoris Pro Bold 700 · 0.40 × bar height
باية محيي الدين
Titles · TT Neoris Pro ExtraBold 800 · 0.50 × bar height
فنون · تاريخ · رياضة
Milan Display, the primary face, stays reserved for the logo and hero visuals. Latin digits only (D-015). The font files in fonts/ are the Trial cut; swap in the licensed woff2 files before air (same names).
| Principle | Rule |
|---|---|
| Arrive as one object | A component fades in whole (1.1 s), and it starts to open almost at once (+120 ms). Parts never appear at different times. |
| Weighted glide | Opening moves use cubic-bezier(.5,0,.2,1) over about 1.55 s: they get moving early and land long and soft. |
| Labels resolve | The label comes out of a real blur (0.2em → 0 over 1.9 s), fades in (1.3 s) and rises 0.32em while settling from 103% scale (2.1 s). Movement and blur sit on separate layers, so the glyphs never shake. |
| Light lives in the gold | When idle, light leaves the centre of each bar and travels out to both endcaps (4.2 s, every 8 s, rippling row by row). It starts almost invisible and grows stronger as it reaches the caps. It fades in over 2.0 s and out over 1.1 s. Navy never carries light. |
| Leave in reverse | Light goes first, then the text, then the structure retracts, then everything fades. |
| Stagger | The title leads. Options follow at +380 ms, then +220 ms each. They close bottom to top, 150 ms apart. |
Components
Each card rests on its final frame. Hover to play it · click to open the full sheet · Esc to close.
Handoff
For the developer and their AI agent.
Install & files
| Path | What |
|---|---|
lib/tfe-ui.css | Tokens and every component's styles. Include once. |
lib/tfe-ui.js | Runtime, window.TFE. Include once, after the CSS. |
assets/endcap-{left,right}.png | Gold endcap, 414×640, transparent. |
assets/endcap-{left,right}-spec.png | Specular maps for the idle light. |
lib/tfe-NN-*.css/js | One pair per component from TFE-03 on (e.g. tfe-03-participant-card). Include after the core files, only for the components you use. |
assets/portrait-ring.png, -spec.png | TFE-03 gold ring (1024², centred for rotation) and its facet mask for the light. |
assets/participant-placeholder.jpg | TFE-03 placeholder portrait, used when no photo is given. |
assets/source/ | Full-resolution endcap master (803×1242). |
fonts/TTNeorisPro-*.woff2 | Broadcast face (Trial cut; replace with the licensed files). |
stage.html | 1:1 test page. ?c=tfe-03 picks the component (default TFE-02). ?bg=transparent for overlay. Keys: O open, C close, R replay. |
index.html, docs/ | This document (HeroUI look). Not needed on air. |