145Visual library / Motion
One idea.
Many shapes.
Scenes that explain, highlight, and set a rhythm. Hover or focus a card to see it move.
- General9:16 · 6sRevenue counterWhen speech mentions revenue, profit, or a monetary result.
- General9:16 · 6sThree stepsWhen speech summarizes a method in three steps.
- General9:16 · 6sBefore afterWhen comparing a previous result with a new result using two numbers.
- General9:16 · 6sCall to actionAt the end of a video, when asking viewers to tap a button.
- General9:16 · 6sQuestion answerWhen answering a frequently asked question.
- General9:16 · 6sStep by stepWhen explaining four steps in sequence.
- General9:16 · 6sNumbered listWhen listing mistakes, tips, or reasons.
- General9:16 · 6sComparisonWhen comparing two options side by side.
- General9:16 · 6sPhone tutorialWhen demonstrating a sequence of actions inside an app.
- General9:16 · 6sPhone chatWhen describing a customer conversation that led to a sale.
- General9:16 · 6sLaptop dashboardWhen presenting monthly results.
- General9:16 · 6sNotificationsWhen describing sales arriving one after another.
- Real estate9:16 · 6sMortgage calculatorWhen explaining an estimated mortgage payment.
- Real estate9:16 · 6sProperty cardWhen presenting a property with a price and dimensions.
- Health9:16 · 6sMedical warning signsWhen listing symptoms and possible contributing factors. Replace illustrative content with verified clinical information.
- Health9:16 · 6sBody diagramWhen identifying body regions and possible causes of pain. Illustrative content does not replace medical advice.
- Nutrition9:16 · 6sBalanced plateWhen explaining how to divide a plate into food groups.
- Nutrition9:16 · 6sFood swapWhen suggesting a food substitution.
- Legal9:16 · 6sLegal deadlineWhen explaining a running legal deadline. Verify the applicable jurisdiction and facts.
- Legal9:16 · 6sLegal codeWhen quoting a legal provision. Replace illustrative legal text with the applicable verified source.
- Creators9:16 · 6sFollower counterWhen celebrating or discussing a follower count.
- Creators9:16 · 6sCreator commentWhen replying to a viewer's comment.
- Legal panels9:16 · 6sLegal article panelWhen showing a legal article on a document. Verify the jurisdiction and cited rule.
- Legal panels9:16 · 6sLegal deadline panelWhen explaining a legal time limit on a timeline.
- Legal panels9:16 · 6sRefund panelWhen adding up the components of a customer refund.
- Creator panels9:16 · 6sThree second hook panelWhen explaining the importance of the first three seconds.
- Creator panels9:16 · 6sWaveform panelWhen explaining successive audience tests for a video.
- Creator panels9:16 · 6sEngagement panelWhen listing viewer engagement signals.
- Health panels9:16 · 6sHeart panelWhen introducing heart rate and cardiovascular health.
- Health panels9:16 · 6sArtery panelWhen explaining pressure in a clear or narrowed artery.
- Health panels9:16 · 6sHealth chart panelWhen illustrating a risk range or an undiagnosed condition. Verify clinical figures before use.
- Nutrition panels9:16 · 6sDrink carton panelWhen revealing the sugar content of a packaged drink.
- Nutrition panels9:16 · 6sSugar cubes panelWhen translating grams of sugar into cubes.
- Nutrition panels9:16 · 6sNutrition limit panelWhen comparing sugar with a daily limit and suggesting whole fruit. Verify the intended guidance.
- Real estate panels9:16 · 6.3sBuilding panelWhen introducing a property development. The building rises floor by floor while its floor count animates; set floors to zero to hide the count.
- Real estate panels9:16 · 5.7sLocation map panelWhen explaining a location and walking distance. The count can land on a spoken word or an explicit panel time; up to two additional locations light up when named.
- Real estate panels9:16 · 7.3sFloor plan panelWhen showing a property interior: an outlined floor plan becomes a 3D view with area and four room labels.
- Real estate panels9:16 · 4.8sProperty price panelWhen introducing a property price above the floor plan. Zero hides the numeric price.
- Transitions9:16 · 0.4sTransition glowFor a standard scene change: a warm light leak peaks at the cut.
- Transitions9:16 · 0.3sTransition flashFor a sharp, emphatic cut: a short white flash peaks at the cut.
- Transitions9:16 · 0.6sTransition film burnFor a change of topic or time: film-burn shapes sweep across the screen.
- Transitions9:16 · 0.4sTransition glitchFor technology, errors, or sudden reversals: separated color channels, displaced strips, line tearing, and static peak at the cut.
- Transitions9:16 · 0.6sTransition tvFor a section ending or a joke: the image closes into a line and opens again.
- Transitions9:16 · 0.6sTransition curtainFor a new item or topic: a strip in the accent color sweeps across the screen.
- Transitions9:16 · 0.5sTransition zoomTo move toward an important detail: speed rays and blur emphasize the cut.
- Transitions9:16 · 0.6sTransition blindsFor a change of setting or day: seven strips close and open in sequence.
- Transitions9:16 · 0.7sTransition irisTo close a story or focus on a detail: a circle closes at the center and reopens.
- Transitions9:16 · 0.5sTransition fadeFor a dramatic pause or passage of time: the image briefly fades to black.
- Pointers9:16 · 2.4sPointer down arrowTo point at a button, number, product, or link.
- Pointers9:16 · 2.6sPointer curved arrowTo draw attention to a detail with a hand-drawn curved arrow.
- Pointers9:16 · 2.4sPointer side arrowTo point toward nearby text, a button, or an on-screen item.
- Pointers9:16 · 2sPointer red crossTo reject an option or mark something as incorrect.
- Pointers9:16 · 2sPointer green checkTo confirm, approve, or mark an item as completed.
- Pointers9:16 · 2.4sPointer circleTo circle a number, face, button, or other detail.
- Pointers9:16 · 2.2sPointer underlineTo underline an important word, number, or phrase.
- Pointers9:16 · 2.6sPointer boxTo outline a region, screenshot detail, button, or object.
- Pointers9:16 · 2.4sPointer highlighterTo highlight a written phrase, value, or screenshot line.
- Pointers9:16 · 2.8sPointer spotlightTo isolate a face, product, or screenshot detail by darkening the surroundings.
- Pointers9:16 · 2.6sPointer bannerTo conceal an area such as a face, name, number, or screenshot detail.
- Pointers9:16 · 2.6sPointer toggleWhen asking viewers to enable or disable a feature or mode.
- Pointers9:16 · 2.6sPointer tapWhen asking viewers to tap or click a specific point.
- Pointers9:16 · 2.4sPointer numberWhen numbering steps or items over the footage.
- Pointers9:16 · 2sPointer raysTo surround an important object, face, or number with emphatic rays.
- Pointers9:16 · 2.4sPointer questionWhen asking a question or showing uncertainty near the speaker's head.
- Pointers9:16 · 2.2sPointer exclamationWhen warning about an error, risk, or important precaution.
- Video effects9:16 · 2.6sEffect vignetteTo create a darker cinematic mood or draw attention to the speaker's face.
- Video effects9:16 · 2.8sEffect blurTo blur the background while keeping the face sharp, like portrait mode.
- Video effects9:16 · 2.8sEffect glowFor a dream, memory, luxury mood, or beautiful moment: bright areas gain a soft halo.
- Video effects9:16 · 2.6sEffect chromatic blurFor an old-lens, dreamlike, or dizzy look: red and blue fringes appear around edges.
- Video effects9:16 · 2sEffect shakeTo emphasize a striking number, reversal, surprise, or impact with camera shake.
- Video effects9:16 · 3sEffect money rainWhen discussing sales, profit, revenue, or incoming money.
- Video effects9:16 · 3sEffect confettiTo celebrate a milestone, sale, achievement, or birthday with confetti.
- Video effects9:16 · 2.8sEffect cinemaFor storytelling, revelations, or epic moments with a film-trailer look.
- Video effects9:16 · 2.6sEffect noirFor a serious scene, memory, drama, or secret with a monochrome look.
- Video effects9:16 · 2.8sEffect tv linesFor an old CRT, surveillance camera, archival recording, or memory.
- Video effects9:16 · 2.4sEffect staticFor a weak signal, interference, failing memory, or suspense.
- Video effects9:16 · 2.8sEffect vhsFor a nostalgic recording, 1990s home video, or archival VHS look.
- Video effects9:16 · 2.8sEffect prismFor dreams, dizziness, amazement, or confusion: prism-like image copies spread apart.
- Comedy9:16 · 3sStone textTo give a phrase physical weight: stone letters hang briefly, then fall and break the floor.
- Comedy9:16 · 3sCracked screenFor a screen-hit joke: glass cracks at the selected point, the image shakes, and the cracks remain.
- Comedy9:16 · 3.5sStage spotlightFor a request for attention or light: the room darkens and a stage spotlight shines on the subject while side beams sweep.
- Comedy9:16 · 3.5sConcert strobeFor a concert or nightclub joke: the room darkens, a white strobe pulses to the beat, colored beams cross, and fog rises.
- Comedy9:16 · 3.2sExplosionFor an explosion joke: realistic fire, dark smoke, and sparks erupt at x/y, with a white flash and a short shake.
- Comedy9:16 · 3.5sFireFor a heat or fire joke: realistic flames rise from the lower edge and a warm flicker covers the footage.
- Comedy9:16 · 3.5sSmokeFor a disappearing act, mishap, or concealed change: gray smoke rises, covers the screen, and dissipates.
- Comedy9:16 · 3sShattered glassFor a broken-screen joke: glass cracks at x/y and the shards fly and fall, with a short flash and shake.
- Neon9:16 · 3.5sNeon quoteFor a strong headline: text blocks alternate weights and the starred keyword glows in the corner-light color.
- Neon9:16 · 4sNeon good badTo challenge apparently good advice: a green card is struck by a light streak, breaks apart, turns red, and reveals a verdict.
- Neon9:16 · 4.5sGlass chartWhen a metric rises or falls: a white curve draws progressively while its marker and counter move to the final value.
- Neon9:16 · 4.5sStuck progress barTo show something that never quite finishes: a progress bar stops near completion, locks, and reveals an emphatic phrase.
- Neon9:16 · 4.5sAttempt counterWhen success follows repeated attempts: failed attempts receive red crosses and strikes; the successful attempt lights up green.
- Neon9:16 · 4.5sGlass listWhen listing completed work or benefits: dim items light up one by one with green checks on a glass card.
- Scene objects9:16 · 4.5sObject cardWhen introducing an object with numeric facts: a rotating 3D object appears with a 2×2 fact card. Change the video src to a bundled object file; the renderer reads that HTML resource directly.
- Scene objects9:16 · 4.5sHouse constructionWhen explaining a build or staged process: a 3D house assembles while step labels light up. Playback runs once at 1.2×, completing in 2.4 seconds; allow at least 3.5 seconds for the badge to follow completion.
- Scene objects9:16 · 5sBrazil mapWhen discussing reach or locations in Brazil: an angled map lights states individually, by region, or in a chosen set, while a counter animates above.
- Scene objects9:16 · 5sSolar systemWhen introducing the universe, a central idea, or orbital relationships: four planets orbit a 3D Sun, passing behind and in front of it.
- Scene objects9:16 · 4.5sVideo galleryWhen showcasing video work: six portrait cards fan out in 3D and one moves forward. Replace placeholder gradients with muted video elements; set data-start, data-duration, and the correct src. Optional views count below.
- Interfaces9:16 · 4.8sNotes interfaceWhen listing requirements, steps, or tasks: a title types in and each item gains a check in sequence.
- Interfaces9:16 · 5sAI chat interfaceWhen showing a request to AI: the request types in, sends, waits, and receives a reply with a finished video.
- Interfaces9:16 · 4.8sSearch interfaceWhen inviting a search or introducing a product: the query types in and a leading result appears.
- Interfaces9:16 · 4.5sCamera interfaceWhen discussing filming or appearing on camera: the footage becomes a camera viewfinder and a phrase appears word by word.
- Interfaces9:16 · 4.8sCommand barWhen showing a computer or AI command: the command types in, Enter submits it, and stages receive checks one by one.
- Proof cards9:16 · 4sReceiptWhen explaining cost and elapsed time: the cost card counts up, slides aside, and gives way to a time card.
- Proof cards9:16 · 4sCompleted checklistWhen listing tasks that are no longer necessary: each item appears and is crossed out.
- Proof cards9:16 · 4sCrossed out quoteWhen comparing an old recurring cost with a new price.
- Proof cards9:16 · 3.6sProgress meterWhen describing a low or high cost, effort, or risk: a gauge indicates the level.
- Proof cards9:16 · 3.6sTime counterWhen stating how long a task takes: a counter reaches the chosen time and unit.
- Proof cards9:16 · 4.5sEditing behind scenesWhen showing editing in progress: an editor panel displays footage, waveform, captions, a moving playhead, and successive cuts.
- Proof cards9:16 · 4.5sWaveform cutsWhen explaining removed pauses: red waveform gaps disappear one by one, the waveform joins, and the duration decreases.
- Dental demonstrations9:16 · 4.6sDentist brushingWhen correcting brushing technique: hard brushing marks the tooth red, the wrong title is crossed out, and a soft brush gently cleans a protected tooth.
- Fitness demonstrations9:16 · 5.4sMuscle recoveryWhen explaining muscle recovery: training contracts the muscle; sleep, protein, and rest then send energy into it and it grows.
- Legal demonstrations9:16 · 5sConsumer rightsWhen explaining retained and lost rights: retained items gain checks while excluded items are crossed out and move away. Verify the applicable jurisdiction and facts.
- Nutrition demonstrations9:16 · 5sNutrition orangesWhen comparing whole fruit with juice: oranges are squeezed into one glass, sugar remains in the juice, and fiber moves out, with labels.
- Architecture demonstrations9:16 · 5.5sArchitect roomWhen explaining a small-room design: window light reflects from a mirror, then a floor-to-ceiling curtain demonstrates height.
- General9:16 · 4sYear hookFor an opening year or number hook: large digits flip over a dark chart panel and a pill badge emphasizes the message.
- General9:16 · 4.5sProfession cardsWhen presenting several professions or niches: stacked cards fan out with an occupation icon on each.
- General9:16 · 4.5sComment call to actionAt the closing call to action: a comment box appears, a keyword types in, and a finger taps Send.
- Captions and titles9:16 · 3.4sText karaokeFor standard short-video captions: white words remain visible while the current spoken word turns yellow and bounces.
- Captions and titles9:16 · 3.4sText popFor a hook or emphatic reversal: one or two large words pop on their spoken timing; the last word is highlighted.
- Captions and titles9:16 · 3.4sText chromaticFor energetic technology, AI, or editing captions with a chromatic glitch look.
- Captions and titles9:16 · 3.4sText rising glowFor flowing captions: the current word rises from behind a line with a yellow glow, then turns white.
- Captions and titles9:16 · 3.4sText red wordFor a warning, promise, or strong claim: dim words turn red as spoken and remain lit until the next caption group.
- Captions and titles9:16 · 3.4sText italicFor sports, action, challenges, or results: italic captions emphasize the longest word in each group.
- Captions and titles9:16 · 3.4sText translucent boxFor tutorials or busy backgrounds: a subtle dark translucent pill contains the phrase, with a brighter current word.
- Captions and titles9:16 · 3.4sText glowing outlineFor conversational tips, routines, or behind-the-scenes footage with a delicate glowing outline.
- Captions and titles9:16 · 3.4sText typewriterFor commands, code, or AI tutorials: letters type into a dark strip with a moving block cursor that blinks during pauses.
- Captions and titles9:16 · 3.4sText bold titleFor an opening headline: short black text appears on colored strips, one strip per line near the top.
- Captions and titles9:16 · 3.4sText two line titleFor a classic short-video hook: a small white lead-in sits above a large accent-colored second line.
- Captions and titles9:16 · 2.4sText impactFor an emphatic number, price, or promise: text jumps up, sharpens, and leaves a large translucent echo. The entrance lasts 0.5 seconds, then holds until the cut.
- Captions and titles9:16 · 2.4sText springFor an energetic short callout: text springs from zero, overshoots, and settles. It then holds until the cut.
- Captions and titles9:16 · 3sText doodleFor a callout held for several seconds: letters appear individually and wobble like hand-drawn lettering through four stepped poses.
- Captions and titles9:16 · 3sText twistFor a sustained call to action: letters shift and their outlines twist around a wavy baseline in four poses per cycle, faster and stronger than Doodle.
- Captions and titles9:16 · 3sText color glitchFor a technology headline or launch notice: text appears with a chromatic jolt, holds, then briefly splits red and cyan channels across displaced bands.
- Captions and titles9:16 · 2.4sText spotlight offFor an emphatic exit: text flashes on under a moving spotlight; the spotlight closes toward the center and disappears in 0.3 seconds.
- Captions and titles9:16 · 2.4sText exhaleFor an expiring offer or deadline: text types in, holds, then ripples, flattens, blurs horizontally, and evaporates in a 0.5-second exit.
- Captions and titles9:16 · 4sText number badgeFor numbered lists: a top pill holds the current number and item name. Use one copy per item, with adjacent copies meeting at their boundaries. Editor captions remain visible below; do not hide them.
- Image entrances9:16 · 3sEntrance drop leftWhen introducing an image, screenshot, or clip with impact: the card drops from above, holds, then exits left in the last 0.3 seconds. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3sEntrance drop rightWhen introducing an image, screenshot, or clip with impact: the card drops from above, holds, then exits right in the last 0.3 seconds. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3sEntrance drop bottom leftWhen introducing an image or result: the card slides in from the right, holds, then drops downward in the last 0.3 seconds. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3sEntrance drop bottom rightWhen introducing an image or result: the card slides in from the left, holds, then drops downward in the last 0.3 seconds. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3sEntrance zoom oneWhen an image needs a forceful reveal: it enters at 2× scale, snaps down with radial blur, holds still, then rapidly grows at the end. Entry and exit each take about 0.2 seconds. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3sEntrance zoom twoWhen an image unfolds on screen: it starts at 0.5× inside a card surrounded by mirrored copies, snaps to full scale with radial blur, holds, then shrinks again. Entry takes about 0.2 seconds; exit about 0.15 seconds. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3sEntrance side zoomWhen an image enters from the side and recedes: a mirrored edge accompanies a blurred half-screen slide, followed by gradual shrinking and a faster final shrink to about 0.8×. The side parameter selects direction. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3sEntrance click openWhen opening a dashboard, link, or result: an image rises at 44% scale, a cursor clicks it, and it expands with an elastic shake and brief blur. It holds until the cut. The 1.3-second entrance compresses below 2.4 seconds to occupy 55% of the scene; sound timing must compress with it. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.
- Image entrances9:16 · 3.6sEntrance before after curtainFor before/after proof: original footage covers the screen with a recording label, then a bright handled curtain sweeps across, briefly reverses, and reveals the edited footage beneath. The sweep starts after 1 second (earlier below 2.5 seconds) and takes about 1.8 seconds. Match the original clip to the spoken content; remove its CSS filter to retain original color. Set image to a file in the image folder. For footage, replace the image element with a video retaining its ID and class, and add src, data-start="0", data-duration, data-track-index="2", muted, and playsinline. Keep portrait cards beside or below the face; the default 16:9 card sits above it.