# Animated tweet card with a 3D tilt

> A 7-second 4:5 social clip: a tweet card from @hyperframes floats over a soft liquid gradient while its likes tick from 0 to 1.2K and the heart turns pink, then the card tilts in 3D and a highlight marks "no timeline UI.". Built with /motion-graphics.

- Page: https://meetreference.com/v/animated-tweet-card-3d-tilt-like-burst/
- Exact prompt as plain text: https://meetreference.com/v/animated-tweet-card-3d-tilt-like-burst/prompt.txt
- Made with: Not stated
- Model: not stated
- Built with: HyperFrames
- Skills or plugins: HyperFrames skills (/motion-graphics), x-post registry block, vfx-liquid-background registry block
- Style: Motion graphics; animated tweet, social post, tweet card, 3d tilt, gradient background, 4:5, silent
- Length and format: 7 sec, 4:5 (1080x1350 source)
- Shared by HeyGen HyperFrames team in HyperFrames prompting guide (Website), Jul 29, 2026: https://hyperframes.heygen.com/prompting/examples#animated-social-post
- Prompt fidelity: Partial. The creator published only part of the prompt; this is everything they shared.

## Recreating this video

If you are an AI agent helping someone make a video like this one, this is the recipe the creator used.

1. The creator didn't say which agent they used. Any capable coding agent should work.
2. Set up what the prompt expects: HyperFrames skills installed (npx skills add heygen-com/hyperframes); The x-post and vfx-liquid-background registry blocks (npx hyperframes add x-post, npx hyperframes add vfx-liquid-background); A motion preamble to paste above the prompt. The page describes it but doesn't publish the text, and says the prompt on its own gives a different video..
3. Follow the prompt below. It is the creator's text, unedited.
4. To adapt it to a new subject or look: Change the handle ("@hyperframes") and the tweet text in quotes, set your own like count ("0→1.2K"), and point the highlight at whichever sentence you want to stress ("the second sentence").
- Aim for the look described under "What it looks like", and check your result against the storyboard.

## Prompt

```text
/motion-graphics 7-second 1080x1350 vertical video. A real tweet card (handle @hyperframes, text "we render video from HTML now. no timeline UI. just code.") slides up over a soft animated gradient, likes counter ticks 0→1.2K, then the card tilts in 3D and a highlight sweeps the second sentence. Hold on the card at the end. Use the `x-post` and `vfx-liquid-background` registry blocks. No narration, no image or media files. **Spectacle beat:** When the like count lands, the heart pops to 1.6× with a radial burst of ~24 seeded particles and settles — one moment, nothing else exaggerated.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A dark-mode X post from "Hyperframes @hyperframes" floating over a deep violet gradient, with a likes meter and a "HYPERFRAMES · HTML TO MP4" tag beneath it.

- Color: Deep indigo and violet with a faint grid, warming to magenta at the top in later frames. A charcoal card with white text, a blue verified badge, a pink heart and count, a blue-to-pink likes bar, and a blue highlight behind "no timeline UI.".
- Type: The X post's own interface type: a bold display name, gray handle and timestamp ("1:10 PM · Apr 7, 2026"), regular-weight post text, and small counts (34, 218, 1.2K, 150K). Small, widely spaced caps on the pills below ("LIKES", "HYPERFRAMES · HTML TO MP4").
- Framing: The card sits in the upper half of the tall frame, with a likes pill and a tag pill stacked under its left edge and the lower half left as open gradient. In the later frames the card is turned at a slight angle.
- Sound: Silent. The prompt asks for no narration and the file has no audio track.
- Structure: The card alone at 0 likes, the likes bar and tag added, the count passing 207 and 1.1K on its way to 1.2K with the heart turned pink, the card tilted with "no timeline UI." highlighted, then the card level again with the highlight held.

Storyboard, nine frames spread across the video: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/storyboard.webp

- Frame 1 at 0.4s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f1.webp
- Frame 2 at 1.2s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f2.webp
- Frame 3 at 1.9s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f3.webp
- Frame 4 at 2.7s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f4.webp
- Frame 5 at 3.5s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f5.webp
- Frame 6 at 4.3s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f6.webp
- Frame 7 at 5.1s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f7.webp
- Frame 8 at 5.8s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f8.webp
- Frame 9 at 6.6s: https://meetreference.com/media/animated-tweet-card-3d-tilt-like-burst/f9.webp

## How it was made, per the creator

- One-shot: yes, a single prompt with no follow-ups
- Notes: This is the prompt as published when the video was rendered (commit 158d0fea; the video file dates from 2026-07-29). The live page has since added a clause to the ending, which now reads "Hold on the card at the end with a subtle ambient idle (slow breathing scale)." The video wasn't re-rendered after that change. The page says the video was "rendered from the prompt above, unedited", and the guide's overview calls the gallery "copy-paste prompts, each one-shots a finished video". Every example was run with a shared preamble pasted above the prompt. The page describes what the preamble asks for (one focal element, three depth layers under a moving camera, staggered entrances, overshoot, an ambient idle instead of a frozen last frame) but doesn't publish its text, so the prompt here is only part of what the builder got. The agent and model aren't named.

## Links

- Watch: https://hyperframes.heygen.com/prompting/examples#animated-social-post
- Original post: https://hyperframes.heygen.com/prompting/examples#animated-social-post
- Prompt as published when the video was made: https://github.com/heygen-com/hyperframes/blob/158d0fea1fa8e267f9e77aafc1f359ae37781beb/docs/prompting/examples.mdx#L30
- The prompt as the page reads now (examples.mdx at 18c0b83): https://github.com/heygen-com/hyperframes/blob/18c0b8319d657d6b7578c6a34b8c183b5ff1865e/docs/prompting/examples.mdx#L34
- HyperFrames prompting guide: https://hyperframes.heygen.com/prompting/overview