Adaptive glass
A style on top of edit-video, which owns the cut, captions, sound and review. The finish for talking-head product, tool and explainer reels:
the real speaker, moving proof, a palette taken from the footage, centered
captions, selective modern glass and sound that follows visible events. Use it
when the creator chooses it or has no established look. Their own fonts, colors
and references take priority. Full camera, split screen and full proof are
layouts within the style, not separate styles.
Skip it for material that needs no panels: a personal reflection, a joke over footage or a long screen demo that needs the whole canvas.
Layouts follow the material
| Layout | Use | Starting geometry at 1080×1920 |
|---|---|---|
| Full camera | A direct statement, reaction or turn with no useful asset | Camera fills the canvas; captions in the headroom |
| Half split | Proof or a diagram reads clearly above the speaker | Content above y=960; camera pane y=960–1920 |
| Third split | Proof needs more height and the face stays complete | Camera pane from about y=1120 |
| Full proof | Close UI detail, dense text, a result or an animation | Camera hidden; enlarge or reframe the useful detail |
Start proof-heavy reels with the half split when the proof stays readable. Full
screen has to earn its area; small proof over a large empty background means the
face should come back. Screen recordings fill their pane edge to edge
(media-bleed), without a nested card or heading. Change layout on spoken beats
or reveals. Open on the hook's subject: frame 1 should already show the product
or proof, not an empty panel.
Face treatment
Use the actual camera plate, keep its aspect ratio and set the crop from real frames of each take. The split pane blends through spare headroom: transparent at the top edge, about 12% opaque at 65 px, 55% at 160 px and solid at 270 px, with a 75 px side feather. Keep eyes and mouth sharp, keep the whole face in the pane and check the blurred fill for a second ghost face. Full and split camera layers are never visible together outside a deliberate transition. A tension hook can use a fast, obvious push; compare first and peak frames, because a speaker leaning back can cancel a digital zoom.
Palette from the footage
Inspect the shirt, room, skin and proof separately. A dark shirt suits a lighter
related field; a light shirt may need a deeper one. The
starting palettes are soft-violet,
deep-violet and charcoal; choose one per reel with palette and override
individual tokens with a paletteFile. Keep one color family, use dark heading ink
on a light field and light text on deep glass, and use red or green only when they
mean something. Polish the camera plate from the take (exposure, white balance,
natural skin) before judging colors.
Material
glassMaterial: "optical"for main panels,"soft"for supporting information;glassTone: "dark"or"light". Set them for the whole plan or per scene.- One quiet 1 px perimeter and 28–36 px corners. No stacked corner strokes. Nested media corners are concentric: inner radius ≈ outer radius minus the inset.
- Keep a glass surface at full opacity while it enters and move it instead, about 18 px over .42 s with an ease-out. Fading an ancestor changes what the backdrop samples and makes the blur pop. Fade text separately if needed.
- At most one low sweep after an optical panel settles, and only when the shot is long enough. Never a perpetual shimmer. Keep the blur stable.
- The CSS is optical styling, not refraction. For liquid-glass lensing, morphs or
a named effect, search the HyperFrames registry (
hyperframes catalog), inspect the item and render-test it in the project. If true fluid merging does not render reliably, use an honest shared-shape expansion and say so. - Proof footage stays unobscured. Full proof is content, not a frosted panel.
Motion
Carry one surface through connected states: a chip becomes a panel, a panel slides into a new position, related shapes join or split when the explanation calls for it. Tie each move to a spoken beat or visible action. Small arrivals take about .3–.5 s and larger shared-shape transitions .45–.8 s, followed by a readable hold. Use continuous velocity and a restrained settle; avoid a universal bounce, robotic linear slides and repeated identical pop-ins. Words stay stable while their surface moves. Every rendered state comes from timeline time.
Type and captions
Helvetica Neue Bold is the default, with Helvetica and Arial as fallbacks. Use an installed font and confirm the renderer used it; never commit system font binaries. Captions are usually one or two lines at about 54 px on a 1080-wide export; panel headings 52–76 px with few words; source labels 24–30 px. Headings, eyebrows and footers are optional. Alongside captions, allow at most one short extra emphasis.
Starting caption anchors (fraction of height): full camera .235, half split .55,
third split .595, full proof .60–.615. Two-line captions overflow easily, so
measure the rendered box, backing and shadow against edit-video's safe area. The scaffold writes these anchors
and a starting caption style to captions.json for the captioning tool.
Sound map
Use edit-video's curated sounds (assets/sfx/) and the gains in its manifest
as starting points:
| Visible event | Sound | Timing |
|---|---|---|
| Frame 1 of the hook | curated/hook-impact.wav | On the opening frame |
| Large layout or camera change | curated/camera-shutter.wav | About 4 frames before the cut |
| Small framing or take change | curated/camera-shutter-light.wav | About 2 frames before |
| Panel or element arrival | curated/ui-pop.wav | On the arrival frame |
| Visible click or selection | curated/ui-click.wav | On the click |
| Motivated zoom, crop or pan | curated/zoom-swish.wav | Its rise follows the move |
| Build into a reveal | curated/metallic-riser.wav | Trim or stretch it to resolve on the reveal |
| Earned completion | clean-ding.wav | Sparingly |
Keep speech dominant and make demonstrated clicks and reveals audible. Put each cue family on its own track so overlapping cues are not replaced, merge cues fewer than about 6 frames apart and keep ordinary caption changes silent.
Build the visual layer
-
Prepare the camera plate and proof clips in the run's
assets/: trim, and crop from the original high-resolution source rather than enlarging a small copy. -
Write a scene plan. Start from the example: frame ranges at 30 fps,
layout(face,split-half,split-third,full-proof),type(none,media-bleed,media-card,media-wide,proof,diagram), media ranges, optionallabel,title,footerorcaptionY. -
Generate a new composition:
bashnode <skill>/scripts/scaffold-glass.mjs <run>/work/scenes.json --output <run>/work/glass-v01It validates the whole plan before writing, refuses to overwrite a revision, copies media by hash and copies GSAP from the workspace runtime prepared by
init-workspace.mjs --install. -
Check, inspect key frames, then render with the workspace's HyperFrames (prepared by
edit-video'sinit-workspace.mjs --install):bash.favstash-studio/runtime/node_modules/.bin/hyperframes check <run>/work/glass-v01 .favstash-studio/runtime/node_modules/.bin/hyperframes render <run>/work/glass-v01 --fps 30 --quality high --output <run>/previews/glass-v01.mp4The composition is silent: assemble dialogue, captions and sound in the editor or with FFmpeg, keeping them editable. The checker's
duplicate_media_discovery_riskwarning is expected, because the full-camera, split and blurred-fill layers share one camera plate. -
Treat the output as a starter, not an art director. Adjust face placement and proof crops from the footage, and add purpose-built motion where proof is missing.
The material CSS is an original implementation informed by the six-layer optical model in liquid-glass-css; no third-party code is included.
