All seven scenes are the actual editable studio templates, not stock videos. Previewing them here runs CSS in your browser and does not start a server render. Suggested durations are starting points: adjust them to the amount of text your audience needs to read.
Kinetic text
A two-line headline enters over a dark gradient, followed by a short accent rule. A floating orb gives the still layout a quiet background movement.
Preview animation
What to change
Replace “Make it / move.” with two short lines. Keep the line breaks: a long sentence makes the large type difficult to fit. Change the last span and rule to your accent color.
Timing to check
The second line is delayed by 0.45 seconds and the rule starts at 1.15 seconds. Keep at least a second after the reveal for reading. The orb is a continuing background animation; it is not intended to make a seamless five-second loop.
Where it fits
A short announcement, a slide opening, or an animated quotation. For a portrait export, shorten the headline and inspect it at the actual portrait viewport.
Try Kinetic text in the studio →Product reveal
A bright split card pairs a text introduction with a simple CSS shape. The text slides into place and the shape grows into view before its slower floating motion begins.
Preview animation
What to change
Change the tag, headline, short description and button-shaped label. That label is decorative video content, not a clickable link in the exported MP4. The shape stands in for a product visual without requiring an external image.
Timing to check
The main shape enters over 1.3 seconds and the later floating motion starts at 1.65 seconds. Check the transition on the timeline if you change these durations so the shape does not jump.
Where it fits
A feature teaser for a presentation or social post. This template includes a portrait media query; preview both orientations before changing its layout.
Try Product reveal in the studio →Data pulse
Seven gradient bars grow from their bottom edges at staggered times. The chart is deliberately simple: the motion draws attention to a pattern rather than attempting to animate a dashboard application.
Preview animation
What to change
Set each bar’s --height value to a percentage of the largest value in your data, then add a meaningful title and time period. The supplied bar heights are illustrative demo data, not reported business performance.
Timing to check
Each bar takes 1.1 seconds to grow. The last starts 0.84 seconds after the first, so allow about two seconds for the full chart to settle and more time for the viewer to read it.
Where it fits
An internal progress update or a presentation insert. Add category labels if the audience cannot infer them; decorative bars alone are not a complete explanation of a dataset.
Try Data pulse in the studio →Logo intro
A letter mark rotates and scales into position, then the name and supporting line appear. A restrained halo keeps the final composition alive without moving the main lettering.
Preview animation
What to change
Replace the M inside .mark with your initial and edit the heading and supporting sentence. Start with the CSS letter mark rather than a remote logo URL: external images and fonts are blocked by the exporter.
Timing to check
The mark enters over 1.2 seconds. The heading begins after 0.5 seconds and the supporting line after 0.9 seconds. Keep the finished name visible long enough to recognize it.
Where it fits
An opener for a product demo or a presentation. Keep the supporting sentence optional; removing it often makes a small phone preview easier to read.
Try Logo intro in the studio →Subtitles
Three full-screen lines take turns in the same position, with an accent rule underneath. These are animated text cards, not captions synchronized to an uploaded audio track.
Preview animation
What to change
Edit the three heading elements in order. Use one thought per line and read each aloud at a comfortable pace. This version has no audio input, speech recognition or automatic transcription.
Timing to check
The loop lasts nine seconds, with lines offset by three and six seconds. The studio selects nine seconds for this template. If you change the total cycle, update the offsets and rule timing together.
Where it fits
A silent story, a three-part statement, or text between presentation sections. The supplied percentage keyframes include a short gap between lines; inspect the cut points before exporting.
Try Subtitles in the studio →Countdown
Three numbers appear in sequence, followed by a final “Let’s go.” message. It is a styled visual cue rather than a clock connected to a live event.
Preview animation
What to change
Replace the eyebrow and final message to fit the occasion. Keep the number spans in sequence. To change from three beats to a longer countdown, add spans and set each animation delay explicitly.
Timing to check
The three numbers occupy the first three seconds. The final message starts at three seconds and remains visible. A five-second export leaves a useful ending instead of cutting at the moment the message appears.
Where it fits
The opening of a workshop, an exercise, or a launch announcement. A one-second export only contains the first beat; output duration must cover the entire sequence.
Try Countdown in the studio →Product story
A stylized device card enters under a headline, then three short feature labels appear. The card is drawn in CSS, so the scene is self-contained and easy to recolor.
Preview animation
What to change
Write a benefit-led headline and three concise labels. The device lines are decorative, not a screenshot of a working application. Keep claims specific to the product you are actually describing.
Timing to check
The last feature label begins after 2.2 seconds and enters over 0.8 seconds. Five seconds covers the sequence, while a longer export gives a dense headline more reading time.
Where it fits
A product introduction or a presentation section break. In portrait format, inspect the wrapped feature labels and headline so they do not crowd the device illustration.
Try Product story in the studio →A quick review before exporting
- Change the message before refining colors. Check that every word is yours to publish.
- Choose the final aspect ratio and inspect the preview at that viewport.
- Pause near the beginning, the main reveal and the last frame. Check for cuts and unreadable text.
- Let the final message hold. A finished pose is usually more useful than ending during a transition.
If a result is clipped or does not animate, use the export checks before retrying a render.