Home
Resources
Agent Skills
Video styles
Dark glass — the depth-and-objects video style

Dark glass — the depth-and-objects video style

A video-style skill that directs a short vertical video in the manner of Hyperplexed's videos, rewritten from a frame-by-frame study of them: a near-black field where the client's own screens become glass cards floating in depth, dozens at a time, and the explanation is the cards moving — a field that drifts, a grid that tilts into perspective, a ring that turns and unwinds into a helix, one detail lifted out and enlarged, a screen shrunk into a small diagram, one small line typed word by word. It fixes the rule of one built picture per idea, the material, a motion language, three layers, eleven elements each with one verb, cutting on the transcript's word timings, captions, how to make every card from real captures with nothing AI-generated, and a review checklist. It reproduces the moves, never anyone's footage or code.

Studied from Hyperplexed

Updated 14 October 2026 · By Sadeq

When to use it

Direct and build a short vertical video in the dark-glass style: an interface or idea piece on a near-black field where the client's own screens become cards of glass floating in real depth, dozens at a time, and the explanation is the cards moving: a field that drifts and focuses, a grid that tilts into perspective, a ring that turns, a stack that fans, one detail lifted out of a screen and enlarged, a screen shrinking into a small diagram, one line of small type typed word by word. Use when someone asks for a video "in the dark UI style", "like a Hyperplexed video", a software or site showcase, a feature reveal, or a piece whose subject is an interface or a concept that can be shown as objects arranging themselves. Works for any business with a voice track and real screens of its own. Do not use it for a story with people or places, a bright flat brand piece, or a dense news brief.

Complete file

SKILL.md

---
name: dark-glass
description: >
  Direct and build a short vertical video in the dark-glass style: an
  interface or idea piece on a near-black field where the client's own
  screens become cards of glass floating in real depth, dozens at a time,
  and the explanation is the cards moving: a field that drifts and
  focuses, a grid that tilts into perspective, a ring that turns, a stack
  that fans, one detail lifted out of a screen and enlarged, a screen
  shrinking into a small diagram, one line of small type typed word by
  word. Use when someone asks for a video "in the dark UI style", "like a
  Hyperplexed video", a software or site showcase, a feature reveal, or a
  piece whose subject is an interface or a concept that can be shown as
  objects arranging themselves. Works for any business with a voice track
  and real screens of its own. Do not use it for a story with people or
  places, a bright flat brand piece, or a dense news brief.
license: MIT
metadata:
  author: daena-digital
  version: "2.1"
  collection: video-styles
---

# Dark glass — the depth-and-objects style

A dark-glass video looks like a dark room with a lot of glass in it. On a
near-black field, the client's own screens become cards: rounded, thinly
bordered, floating at different depths, the far ones soft and dim, the
near ones sharp. There are many of them, and they move with intent. A
scattered field gathers into a grid, the grid tilts back into
perspective, a strip of cards curls into a ring that turns, the ring
unwinds into a spiral, and one card comes forward until a single detail
of it fills the frame. A small line of type is written word by word in
the middle of the dark, and a thin white line drawing appears beside it.
The objects are the explanation; the type only names them.

Studied frame by frame (every half second) from Hyperplexed's own
YouTube videos — see Reference. This skill reproduces the **moves** — the
field, the depth, the formations, the morphs, the extraction — never his
footage, his effects' code or his words.

## When to pick dark glass over another style

- The subject is **an interface, or an idea that can be shown as things
  arranging themselves**: pages of a site, screens of an app, the steps
  of a process, a before and after.
- The client has **many real screens** (a site's pages, an app's views,
  a product's states). The style needs twenty or more cards to fill a
  field; ten captures cropped three ways is enough.
- The feel should be **precise and quiet**, but never empty: the room is
  dark and the objects in it are many.
- There is no footage of people and no appetite for generated imagery;
  every card is a capture and every other shape is drawn in the
  composition.

Pick something else if the piece has people and places (grain and map),
if it is a rapid list of facts (terminal), if it should feel handmade
(paper studio), or if there are fewer than a handful of real screens.

## Before building

Run the concept gate in the `video-craft` skill first: when there is a
reference clip, its essence in three sentences that name none of its
objects; the message line; three concepts; and a storyboard in which every
frame says why it means its line, approved before anything renders. Every
picture passes its two tests — only this subject could have produced it,
and one sentence says why it means its line — and every cut follows the
seam rules there: the same axis, direction and speed on both sides, the cut
landing mid-motion, one main direction for the film, an object carrying the
eye across. Those rules are adapted from HeyGen's open-source HyperFrames
skills (Apache License 2.0); the full credit is in `video-craft`.

The main direction is forward, into the field: the dolly moves forward and
an extract comes towards the camera, so both run the same way. Orbit and
rise are held for the moments that need them. The cards are the carriers:
they travel into the next formation instead of being replaced.

## One built picture per idea

The rule this style was rewritten around. Every clause of the script gets
a picture that **acts the idea out**, built in the composition from the
style's objects, and it moves for as long as the idea is spoken.

- An idea is shown as a **change of arrangement**, not as a card with a
  highlight on it. "It reads your pages" is a field of page cards being
  passed through; "four checks" is four cards leaving the field and
  lining up; "under a minute" is a ring that completes one turn.
- **Something changes on every clause**: a formation, a camera move, an
  object arriving or leaving, a word being typed. Nothing on screen is
  still for more than a second and a half.
- **A field scene carries twenty or more objects.** One card on black
  is a slide, not this style.
- **A capture is raw material, never the whole frame with a mark on
  it.** It is cut into cards, shrunk into an object, cropped to one
  detail and enlarged, or set into a small diagram.
- **Morph, do not cut.** The last arrangement of one idea becomes the
  first arrangement of the next: the grid's cards are the ring's cards.
  A hard cut is for a change of section, at most two in a short.

## The world

One material, obeyed everywhere. Decide these before a single frame:

| Property | Choice |
|---|---|
| Surface | Near-black, close to neutral (a very dark grey, or the brand's darkest neutral if it is within a few steps of black). No gradient wash. At most a faint radial lift where the action is |
| Card | A capture with rounded corners (12–20 px at 1080 wide), a 1-pixel border at 15–25% white, no drop shadow. It lives at a depth: nearer cards are larger, sharper and brighter; farther ones are smaller, blurred (up to 6 px) and dimmed to 40–60% |
| Depth | A real perspective camera (a vanishing point, a field of view), so a card that turns shows its edge and a plane that tilts recedes. Depth of field is always on: the focal plane is where the voice is |
| Line art | Single-stroke drawings in white at 80–90%, 3–4 px wide, round caps: a head in profile, an arrow, a bracket, an axis. Drawn by the composition, never traced from somebody else's drawing |
| Type | One line at a time, centred or beside its object, the brand's sans at 34–48 px at 1080 wide, white at 90%, sentence case. A finished line greys to 50% before it leaves. Large type is not this style |
| Accent | The brand colour, used once a scene: the border of the card in focus, the stroke of the arrow that matters, the one word that is the claim |
| Glow | Optional, and only as light coming from a card: a soft bloom of the card's own colours behind it when it is in focus. Never a light that follows a pointer |
| Screens | Captures at 2x of the client's own product or site, cut into as many cards as there are distinct regions, each cropped with page around it rather than to the pixel |

## Motion language

One ease per job, and the same ease every time that job comes up.

| Property | Choice |
|---|---|
| Field | Cards drift slowly in depth (a few pixels a second, each at its own speed) for as long as the field is on screen. A field never freezes |
| Formation change | Every card travels from its place in one arrangement to its place in the next over 20–35 frames, eased in and out, each card starting one or two frames after its neighbour so the change reads as a wave |
| Ring and helix | A ring of cards turns at a constant speed around a vertical axis, the cards facing outward, the far side dimmed. A ring unwinds into a helix by spreading its cards along the axis over 30–45 frames while it keeps turning |
| Plane tilt | A flat grid tilts back by 50–65 degrees over 25–40 frames as an axis draws along its edge, so the viewer sees it as a surface |
| Extract | One card moves forward toward the camera over 15–20 frames while the rest dim and blur; then the crop inside it scales up until one detail fills the frame. The detail returns to its card the same way, reversed |
| Shrink to object | A full-frame screen scales down to a card in 15–20 frames and moves to one side; an arrow draws from it to the next object |
| Line art | Draws along its stroke over 12–25 frames, eased out |
| Type | Typed word by word, two to three frames a word, on the words of the voice. Greys to 50% when the voice moves on; leaves by fading over eight frames |
| Camera | Always moving: a slow dolly forward through the field, an orbit around a formation, a rise over a tilted plane. It never stops between two moves |
| Exit | Morph into the next arrangement. A fade to black of 6–10 frames only at the end of a section |
| First frame | The opening frame is a field already in depth with the first line typed. Frame 0 is the poster |

Breaking a rule once is a choice the viewer feels. Breaking it twice is a
different style.

## Three layers, never fewer

Every scene has all three. A scene with one layer is a slide.

1. **Background.** The far cards: blurred, dim, drifting. They are what
   make the dark a space rather than a colour.
2. **Midground.** The formation the idea is about: the grid, the ring,
   the four cards in a row, the card in focus.
3. **Foreground.** The line of type, the line art, the arrow, the
   extracted detail. These are what make the frame read as explained
   rather than displayed.

Two focal points at most: the formation and the one line about it, or
the extracted detail and the arrow to it.

## The elements and their verbs

Each thing in the frame has exactly one way of arriving.

| Element | What it is | Its verb |
|---|---|---|
| Card | One capture, or one region of a capture, as a pane in depth | Joins whatever formation is on screen, travelling to its place |
| Field | Twenty or more cards scattered in depth | Drifts, and the camera dollies through it |
| Grid | Cards in rows and columns on one plane | Assembles from the field as a wave, then tilts back into perspective |
| Ring | A strip of cards bent into a circle | Curls from a row into the circle, then turns at a constant speed |
| Helix | The ring's cards spread along its axis | Unwinds from the ring while turning |
| Stack | Cards one behind another, slightly offset | Fans open card by card, or gathers closed |
| Extract | One detail of one card, enlarged alone on the dark | Comes forward with its card, then scales up out of it |
| Object | A whole screen shrunk to a card, set into a small diagram | Shrinks from full frame and slides aside |
| Arrow | A white single-stroke line between two objects | Draws from the first to the second |
| Line art | A single-stroke drawing that names an idea (a head, an eye, a clock face) | Draws along its stroke |
| Line | One line of small type | Types word by word on the voice |

## Cutting on the voice

The transcript's word timings are the edit decision list. Build the
video from them, not from a bar count. With music and no voice, the
music's phrases take the place of the clauses.

1. **Transcribe with word timings** (any aligner; the timings drive every
   formation change) and write them down as frames at the output frame
   rate.
2. **One arrangement per idea, one change per clause.** A section holds
   one set of cards for its whole length, 5–15 seconds; every clause in
   it changes that set — gathers, tilts, turns, extracts, shrinks.
3. **Morph on the turn.** When the voice moves to the next idea, the
   cards on screen travel into the next arrangement; they do not cut.
4. **Name, then show.** The line types on the noun; the formation changes
   on the verb.
5. **Write the beat table before building.** Three columns: frames, the
   words spoken, what the cards do. If a row's third column says "holds",
   the voice is describing a still frame — cut the sentence or give the
   cards something to do.

| Frames | Spoken | What the cards do |
|---|---|---|
| 0–45 | "Every enquiry lands in one place" | Frame 0: a field of thirty page cards in depth, "Every enquiry" typed. On "lands" the near cards turn toward the camera; on "one place" the whole field gathers into a single stack in the centre |
| 45–100 | "and the follow-up is already written." | The stack fans open into a row of five; the middle card comes forward and its reply text is extracted and enlarged; "already written" types beside it and an arrow draws from the enquiry card to the reply |

## Captions

Word-synced, four to six words a page, in the brand's sans at caption
size, the spoken word in the accent. They sit low in the safe zone, below
every formation, and they stay for the whole video because most viewers
watch muted. So the typed line never repeats the sentence: it carries only
the key phrase of the idea ("a sample of your pages", "four things"), and
the captions carry the rest.

## Assets without generating anything

The style's honesty is that the product on the glass is the real product.
Make the assets from the client's own software.

- **Cards.** Captures of the client's own product or site at 2x, with
  test data that contains no real customer, no third-party logo and no
  account name. One capture cut into its regions (header, form, a
  section, a footer) gives several cards; a site's pages give a field.
  A card that needs to move inside (a form being filled) is a short
  recording of the real product.
- **Depth, formations, line art, arrows.** All built in the composition
  from the cards and from strokes. No downloaded effect packs or light
  overlays of unknown licence.
- **Type.** The brand's display face, or an open-licence sans (Inter,
  Manrope, Geist). Record the licence.
- **Voice and music.** Whatever the client's provenance rules allow,
  credited the same way. Music in this style is quiet and long-toned; a
  beat would turn it into a product drop.

No AI-generated image, clip or sound effect on screen. If a screen does
not exist yet, the answer is a line drawing and the one line about it,
not a mock-up drawn to look like software.

Every asset made or chosen for the video — each capture, each crop, each
clip, the voice take, the music, each sound effect — is shown to the
person and approved on its own before it is placed. A changed asset is
shown again. Nothing reaches the render on the maker's say-so. The
built pictures are shown too: a still of each formation, before the
full render.


## Content rules that travel with the style

- No numbers on screen that are not in the script and sourced. Test data
  inside the product must not read as results: no revenue figures, no
  growth charts, no counts that look like a track record.
- The product shown is the product that ships. A feature that does not
  exist is not placed on a card.
- The marked word is one per scene, and it is the claim.
- No client logos, awards or testimonials unless they are real and
  permitted.

## Review before export

- [ ] The concept gate in `video-craft` was run, and its review list passes.
Render one frame per second as a contact sheet and check it against this
list. A still that fails here fails in motion too.

- [ ] Frame 0 is a field in depth with the first line typed, not a dark field.
- [ ] Every clause changes something: a formation, a camera move, an object, a word.
- [ ] Nothing on screen is still for more than a second and a half.
- [ ] Every field scene carries twenty or more cards, with depth of field visible.
- [ ] No capture is the whole frame with a highlight on it; each is a card, an object or an extracted detail.
- [ ] Ideas change by morphing; at most two hard cuts in a short.
- [ ] Every scene shows three layers.
- [ ] One line of type at a time, typed on the voice; no large type.
- [ ] No real customer data, account name, figure or third-party logo is on any card.
- [ ] The provenance lists every recording's origin and every font's licence.
- [ ] Every asset in the render was shown to the person and approved.
- [ ] The first and last frames read as the same world.

Then watch it once at full speed with the sound off. If the pictures tell
the story without the voice, the cut is right.

## Reference

The first video built in this style is sample 6 on
<https://daenadigital.com/resources/examples/videos>: a 16-second piece
for the studio's free AI search audit. Twenty-four real pages of the
studio's own site float in depth, gather into a stack behind the audit
form, lay out as a grid that tilts back and is scanned row by row, send
four cards forward for the four checks — each lifting out one real detail
(robots.txt, the homepage heading, the structured data, llms.txt) — and
curl into a turning ring for "under a minute". One scene, no cut inside
it.

How the style was studied: on 9 October 2026, frames were sampled every
half second from the first forty seconds of two Hyperplexed videos ("A
viewer sent me an insanely cool effect" and "How to Slay with CSS") and
laid out as contact sheets. What the sheets show is what this file now
describes: dozens of cards in depth with depth of field, a strip that
curls into a turning ring and unwinds into a helix, one card that becomes
a grid that tilts into perspective, a recording shrunk into a small
diagram, one detail lifted out and enlarged, one small line typed word by
word beside a single-stroke drawing, and almost no hard cuts.

Version 1.0 of this file was written from the channel's open demo code
instead of its videos, and described glass panels lit by a glow that
followed a cursor. A sample built from it was rejected as "the same
slop… no rich content, no element, no visualization", and the study
showed the videos contain none of that. Read the rules above as the
correction of that failure.

Knowledge base

What we studied to learn the style

A viewer sent me an insanely cool effectStudied frame by frame every 0.5 s, 0-40 s: dozens of cards in depth, a strip curling into a turning ring and unwinding into a helix, one card becoming a grid that tilts into perspective, one small typed line
How to Slay with CSSStudied frame by frame every 0.5 s, 0-40 s: a recording shrunk into a small diagram with an arrow, one detail lifted out of the screen and enlarged alone on black
Hyperplexed on CodePenThe source code behind the videos: glowing blobs that follow the pointer, hover glows across cards, dark fields with one light
hyperplexed-components: the channel's effects as React componentsA third party's reconstruction of the effects, useful for reading each one as a small rule rather than a demo
Hyperplexed on EliApps ResourcesThe channel's own framing: front-end development through one person's lens, with the CodePen as the companion

Sources

What this is based on

motion-skills: motion art direction, animation principles and short-form video rulesiart-ai (MIT)
hyperframes references: video composition, beat direction, typography and motion guardrailsHeyGen (Apache-2.0)
Recreating YouTube's ambient mode glow effect (Smashing Magazine)Adrian Bece, Smashing Magazine
HyperFrames skills: story-spine (storyboard as proposal, the source test) and motion-doctrine (the vector law, carriers, causal motion) — adapted in video-craftHeyGen (Apache-2.0)