Skip to the content
DreamCutDocs

Layout cards and custom HTML

Add ready-made pricing cards, quotes, stats, buttons and illustrations to your video, type your own words in them, or write a card in HTML and CSS.

Layout cards are pieces of a designed web page, such as a pricing card, a customer quote, a row of stats, a button or an illustration, set on a transparent background over your recording. Use one to show a price, a quote or a next step while you talk about it. Pick a card from the Layout panel and type your own words, or write your own card in HTML and CSS.

A click adds the card at the playhead, ready for your words

Add a card

  1. Move the playhead to where the card should appear.
  2. Click Layout in the tool rail, or press L. The Layout panel opens with its cards in groups, from Showcase to Illustrations, and Custom last.
    • Rest the pointer on a card to watch it play.
    • If Layout is greyed out with the tooltip "Requires a scene.", there's no visible scene under the playhead: move the playhead onto your recording on the Video lane.
  3. Click a card. It lands on the canvas at the playhead, selected, and its clip appears on the Overlay lane.
    • Most cards last 6 seconds; a few last 5 or 7. Drag the clip's ends on the timeline to change that.
  4. Drag the card to move it, and drag its corners or edges to resize it.

The card plays its own animation in, holds, and goes out at the end of its clip, so right at its start it looks faint until you play on. Click Layout in the rail again, or the × at the top of the panel, to close it.

The cards

The note at the top of the panel calls them ThreeUI elements: each card is one piece, such as a pricing card or a footer, taken from a ThreeUI web page design.

GroupCardsWhat they are
ShowcaseArca Pass, Arca Directory, Umbra Swatches, Volta Services, Arca Show Us, Japan MapA profile and wallet pass, an app in a browser window, colour swatches, words rolling on a drum, a collage and a night map of Japan
PricingEcho Vale, Umbra, Corvane Vault, Astral Atlas, Volta Atelier, MorrowA plan's name, its price, what's included and a button or link
TestimonialsKairo, RenderLab, Echo Vale, Halvorsen, Umbra, Agent AIA quote with the person's name and role, some with a portrait
DataHalvorsen Stats, Sunseto ChartStats whose figures count up, and a week-long energy chart
SectionsWorkshop Steps, Drift Feature, Drift FAQ, Oblo Logos, Drift FooterNumbered steps, a feature, questions and answers, client logos and a site footer
ButtonsAureon Crystal, Liquid Metal, Umbra Chrome, Get Started, Rondel Record, Brand OrbAnimated buttons, most acting out a hover or a press
TextCopy Prompt, Intro Text, Gallery HeadingAnimated headlines and a wordmark
IllustrationsKeyboard, Lighting, Design Tools, Globe, Code Tools, Codex, Claude Code, AirPods, 3D ModelAnimated drawings. Some take a caption; others type your words into the scene, such as a prompt or a line of code
CustomCustom HTMLA card you write yourself. See Write your own card in HTML

Adding a card, or writing your own, uses no credits.

Change a card's words

Every card has words you can replace, from a quote to the rows of a price list. Each line you type is one row of the card.

  1. Click the card to select it. The inspector opens on the tab you used last, Preset at first.
  2. In the Layout element section, type in the Text box.
    • The line under the box says how this card reads its lines. For Echo Vale: two small labels on the first line, then the plan name, the price, one included item per line, and the button.
  3. The card on the canvas updates as you type.
The whole Echo Vale pricing card selected on the canvas with its toolbar above it, reading SOLO FIELD PASS, 8 PLACES / SEASON, THE WANDERER, $680 / PERSON, three Included rows, one Optional row and the button REQUEST A SOLO PASS; the inspector shows Layout element with Preset Echo Vale, the card's description, the Text box with the card's first lines and the hint under it, then Style with Font Unbounded, Color 101412, Accent E44B3C and Shadow 35%, and Apply to Scene and Apply to All at the bottom
Each line in the Text box is one row of the card; the hint under it says how this card reads them

To type on the canvas instead, double-click the card, or select it and press Return or click the I-beam in its toolbar.

Most cards share a few habits:

  • A | splits a line into parts, such as Hand-bound route journal | Included.
  • Square brackets make the button: [Request a solo pass].
  • On some cards an ALL-CAPS first line becomes a small tag or flag.
  • On the illustrations, clearing the text shows the drawing on its own, or plain bars where the words were.

Change a card's look

The Preset tab holds everything for the selected card, top to bottom:

SectionWhat's in it
TransformPosition, size, rotation and Z-index (higher sits in front), and Anchor to the layer: on, the card is placed within your recording's frame instead of the whole canvas
CropTrim the card's edges. See Crop and rotate
Layout elementThe Preset menu, which swaps this card for another, a line on what the card is, and the Text box
StyleFont, Color, Accent on cards with a second colour, and Shadow
The card's name, such as Echo ValeSpeed of the animation, from 0.25× to 3×, then the card's own options. Most have a Theme, such as Sage, Ink (featured) or Bone on Echo Vale, and some have more, such as the Button switch on Echo Vale
AppearanceCorner radius
HideTakes the card out of the video without deleting it

Reset all and Delete sit at the bottom. The Animation tab has the card's keyframes, a way in and its timing; Overlays explains it.

Once you change something, Apply to Scene and Apply to All appear at the foot of the inspector. On a ready-made card they copy very little:

  • On the Preset tab they copy only Corner radius, not the font, colours, theme or shadow: set those on each card. (On the Animation tab they copy the way in and out, its timing and the keyframes.)
  • They reach every HTML-type layer in the scene or the video, not just layout cards: animated titles and HTML Element boxes too.
  • The words, and which card each one is, stay as they were.

On a Custom HTML card they copy its whole style (Typography, Background and Corner radius) to your other Custom HTML cards, and leave each card's code alone.

When you pick another card in the Preset menu, your words come along, with any colour or font you changed. Check the new line under Text, since each card reads its lines its own way.

The card's toolbar

A selected card has a toolbar over it on the canvas:

ButtonWhat it does
I-beamEdit text (double-click or Return): type the card's words on the canvas
The card's namePreset, followed by the card's name, such as Preset: Echo Vale: swap it for another card
Colour circleColor: the card's main colour
DiamondAdd keyframe at the playhead
CropCrop: drag its edges
Stack and numberZ-index: type a number from 0 to 10, or drag the icon
The wandGenerate with this layer
⋯More: the right-click actions

Write your own card in HTML

Custom HTML is a card you write yourself, for anything the other cards don't do.

  1. Open the Layout panel and scroll to Custom, the last group.
  2. Click Custom HTML. A sample card lands at the playhead for 4 seconds: a small "Introducing" label, the headline "A calmer way to edit", a line under it and a footer.
  3. In the inspector's Style tab, find the HTML code box and replace the sample with your own HTML and CSS. Put your CSS in a <style> tag in the same box, as the sample does.
    • The canvas updates a moment after you stop typing.
  4. For more room, click the arrows in the box's corner (Edit the code in a large editor). Click Done, or press Esc, to close it.
The Custom HTML sample card selected on the canvas, reading Introducing, A calmer way to edit, with its toolbar under it, the Layout panel scrolled to Custom, and the inspector's Style tab showing the HTML code box, which starts with a style tag and a comment
The sample is a starting point: replace it with your own HTML and CSS

To change only the words, double-click the card on the canvas and type, or use Edit its words (double-click) in its toolbar. The toolbar also has Text color and Background color.

The sample code starts with a <style> tag, and inside it a comment that lists the variables the inspector's style controls set. Use them in your CSS and those controls keep working on your card:

VariableSet by
--dreamcut-layout-textText color
--dreamcut-layout-body-textText color, slightly faded, for paragraphs
--dreamcut-layout-muted-textText color, more faded, for small print
--dreamcut-layout-backgroundBackground color
--dreamcut-layout-borderBorder color
--dreamcut-layout-radiusCorner radius
--dreamcut-layout-heading-sizeHeading size
--dreamcut-layout-body-sizeBody size

Headings (h1 to h3) take the Heading font and paragraphs the Body font. Your own CSS wins over DreamCut's defaults.

Style a Custom HTML card

The top of the Style tab has the same Transform, Anchor to the layer and Crop as the other cards. Below the code box it has:

SectionSettings
TypographyFont, Heading font (headings), Body font (paragraphs), Heading size, Body size, Font weight, Line height, Letter spacing, Text shadow, Text color and Text shadow color
BackgroundBackground color, Border color and Border width
AppearanceCorner radius
HideTakes the card out of the video without deleting it

Font sets the type for the whole card, and Heading font and Body font change headings or paragraphs on their own. If you paste a whole web page, with its own head and body, Typography hides and your page's CSS sets the type.

For a bare web page without Typography and Background, press H and drag a box on the canvas. That adds an HTML Element layer, whose code goes in the HTML section of the inspector. Overlays covers it.

Cards from older projects

The first set of layout cards, such as Title + Description, Stats and Pricing Card, are no longer in the panel. Projects that use them still open, play and export, and you can still edit them.

A card written in SwiftUI shows a SwiftUI code box and a Convert to HTML button at the top of its style settings. Click it to turn the card into HTML, so you can edit it like any other card.

Tips and limits

  • The ready-made cards don't show their code. To go beyond their Style and Theme options, write the card yourself with Custom HTML.
  • If a card is hard to read over a busy part of the recording, raise Shadow, try another Theme, or move it over a calmer area.
  • Sakura can add a layout card or an HTML layer for you when you ask in the chat.

What's next