# Screen-light glass (sref-T2SNRD)

Slice style ref: sref-T2SNRD
Page: https://tryslicemedia.com/styles/sref-T2SNRD
Slug: screen-light-glass

> THIS IS A MOODBOARD, NOT A TEMPLATE. The style below is inspiration for the look and feel. Keep its materials, colours, textures and the way it moves, but invent your own scenes, characters and objects for this clip. You are not limited to anything shown in the preview, and nothing in it has to appear. Use illustration and animation to help tell the clip's story.

## At a glance
- Feel: frosted glass cards float through a dark room lit only by a screen, one drifts into focus.
- Group: Light, glass & film
- Energy: calm; mood: late-night, intimate, modern
- Pictures: all drawn, no photos needed
- Palette: #090E13, #2B7480, #E4F0F4, #FF7A5C, #FFC66B
- Preview shape: 9:16 (the look works in any shape: 9:16, 4:5, 1:1 or 16:9)

## The look
Frosted glass cards floating in a dark room lit only by a screen. Ground: near-black blue #090E13 with a teal screen glow (#2B7480) rising from the bottom edge and a faint warm amber spill (#FFC66B) in one top corner, plus a few soft out-of-focus bokeh discs. Cards: rounded rectangles of frosted glass, about 20% white at the top-left fading to 5%, a fine grain inside, a thin bright edge that catches light on the top-left and fades round the corner, a soft dark drop shadow beneath. Contents are abstract: one small round colour dot and two soft text bars; only the card that matters carries real words, set in a clean grotesk (Onest 600), white, two short lines. Colour: ice #E4F0F4 for glass and text, coral #FF7A5C as the only accent (a thin pin bar and a warm glow under the hero card). Light and camera: real depth of field; cards at different depths drift upward at different speeds and are blurred by how far they sit from the focus plane. Motion: slow upward drift and gentle sway; one card comes forward, sharpens and is held while the others dim; a single light sweep crosses its glass; then it recedes back into the drift. The one rule: everything is light on glass in the dark, and only one card is ever sharp. DON'T: real app layouts, logos, like counts or usernames, emoji, bright white backgrounds, purple or blue-violet gradients, fast scrolling.

## What it suits
- Content: opinion, interview, business, announcement, explainer, personal-story
- Tone: modern, reflective, intimate, cool
- Pace: slow
- Best for: what people said: a reply, a message, a quote pulled out of the noise and held up to read
- Avoid for: warm handmade stories, faith and nostalgia pieces that want paper and texture
- Keywords: frosted glass, screen glow, depth of field, floating cards, night, bokeh, soft UI
- Suits (from the library): Replies and reactions, Quotes, Opinion, Interviews, Business

## How to use it
Float the words people said as glass cards through most of the clip, one drifting into focus to be read, cutting back to the speaker once or twice for their reaction.

## Where the speaker sits
Suits Full scene, Small; avoid Split. (save_scene speaker: {"mode":"hidden"}, {"mode":"corner","where":"lower-left"})

## Story first
STORY FIRST. Read the whole clip before you design anything.
1. Write the clip's arc in one line: setup, tension, turn, pay-off. Name the one line that is the reveal.
2. Tag every sentence with its job: setup, context, tension, turn, reveal, example, number, contrast, list, quote, feeling, metaphor, callback, pay-off, aside.
3. The visuals carry the whole clip. If the clip shows the speaker's face, open on them (the first scene keeps them on screen) unless the person says otherwise. After that, never cut back to the speaker full-frame unless the person asks for it; if they do, only on the ending, never in the middle of an explanation. The speaker can still sit inside a scene (a corner, a split or drawn in) when the person wants to be seen.
4. Build one flowing visual story, not a new picture per sentence. Each scene covers a whole thought (one to three sentences), holds 3 to 8 seconds and turns into the next.
5. Start each scene on the first word of its sentence, or up to half a second before. Never cut mid-sentence.
6. Inside a scene, bring small details in on the words they show (an item, a tag, a tick). Earlier details stay.
7. Choose one or two recurring objects or characters in the first scene and bring them back changed. Callbacks beat new pictures.
8. Build up the same picture where you can (add to it, move the camera across it) instead of replacing it.
9. Energy: about 80 percent still, drifting or gentle. Allow one big move in the whole clip, on the reveal, for 1 to 2 seconds, then settle and hold.
10. Numbers sit on a scale (gauge, bar, table, timeline) and hold long enough to read. Contrasts are a still split or the same layout twice.
11. Feelings get a quiet image, or one of the cuts back to the speaker; never effects.
12. On-screen text names, labels or quotes; it never repeats the caption. Five words or fewer per label.
13. End every scene by settling or thinning out, or by turning into the next scene. No exit effects.
14. The style sets the look. These rules set when, how long and how calmly. If the style's own motion rules ask for more energy than this, use less.

TECH: one HTML file, one GSAP 3 timeline created paused as window.__timelines.main, duration = the scene's length, transforms and opacity only.

## Sample frames
- Frame 1: https://ripttgmjfyhtufiygtbe.supabase.co/storage/v1/object/public/style-frames/sref-T2SNRD/f1-a7c7f1bf.webp
- Frame 2: https://ripttgmjfyhtufiygtbe.supabase.co/storage/v1/object/public/style-frames/sref-T2SNRD/f2-d3141159.webp
- Frame 3: https://ripttgmjfyhtufiygtbe.supabase.co/storage/v1/object/public/style-frames/sref-T2SNRD/f3-09907f34.webp
- Frame 4: https://ripttgmjfyhtufiygtbe.supabase.co/storage/v1/object/public/style-frames/sref-T2SNRD/f4-bf72f0aa.webp

## More
- Every style: https://tryslicemedia.com/styles
- All styles as plain text: https://tryslicemedia.com/styles.txt
- Make it in Slice: https://tryslicemedia.com/shorts