Social overlays
Also searched as: social overlays, tweet overlay, instagram card, comment stack, notification HUD, platform cards
Canonical Definition
Social overlays are authentic recreations of platform-specific interface cards — X posts, Reddit threads, TikTok follows, and push notifications — designed to layer over footage as social proof.
Enter: 15 frames; Hold: 60-120 frames; Exit: 12 frames
spring({ damping: 14, stiffness: 180 })
Modern marketing video relies heavily on UGC (user-generated content) and customer testimonials. Rather than quoting a review as plain text, presenting it inside a pixel-perfect X/Twitter card or iOS notification pop adds immediate credibility.
Social overlays feature exact platform typography (Inter, SF Pro, Roboto), verified badges, timestamps, and realistic engagement metrics.
Platform Post & Tweet Overlays
Floating verified posts with subtle 3D tilt and elevation shadows
A customer tweet springs into the frame, tilts slightly toward the viewer, and highlights key praise phrases.
How this works: An authentic X post card featuring avatar, handle, verified badge, and realistic engagement counters.
- Pixel-perfect platform styling with dark/light themes
- Spring entrance with subtle 3D hover float
- Easily parameterized with custom author, text, and avatars
Push Notification Cascades
Simulating viral growth with stacking push notifications
A cascade of notifications pop into view one after another, creating a thrilling sensation of rapid customer adoption.
How this works: Multiple smartphone push notifications stack dynamically with spring-loaded physical collisions.
- Staggered cascade timing with 6-frame offsets
- Dynamic stack displacement: each new card pushes existing cards down
- Authentic iOS/macOS acrylic glass styling
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Highlight the core praise sentence inside the card using an accent color or yellow marker wipe.
- Accompany notification pops with subtle haptic vibration audio cues.
Common Failure Modes (What to avoid)
- Inaccurate platform typography or outdated icons that signal a fake mockup to discerning viewers.
Working catalog implementations
Typed Remotion components ready to drop into code.
X Post Card
Animated X/Twitter post card overlay with engagement metrics
Reddit Post Card
Animated Reddit post card overlay with upvotes and comments
Notification Cascade
Phone notifications land one after another and stack up the screen, each banner pushing the pile down as it arrives, before the whole stack lifts away into a closing card
Camcorder HUD
Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
Build social overlays in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
UI motion & microinteractions
UI motion is the animation of user interface elements — buttons, toggles, sheets, tabs, and modals — demonstrating cause and effect and operational feedback inside software.
Composition & UIProduct demos & devices
Product demos and device scenes present digital software interfaces inside simulated smartphone, tablet, or desktop frames with realistic camera staging and cursor interactions.
Motion FundamentalsStaggering & cascades
Staggering is the deliberate time offset applied between multiple related elements in a group, so they enter sequentially in cascade rather than appearing simultaneously.