HAP · Launch Video Breakdown: Hook, Pacing & Motion Design
HAP is a studio for designing haptics. Now live, with the pitch that haptics should be for everyone.
Scene-by-scene timeline & spoken transcript
The Hook
The Silent App Problem
“(No spoken dialogue — consistent, driving beat with pizzicato synth melodies and sub-bass elements)”
- On screen
- Your app looks alive. But it feels... quiet. What if every interaction could be felt? Make every tap feel more meaningful.
- Camera
- Static text on a light background, followed by a subtle zoom into a mobile app UI, then a static hand graphic, and finally a blurred waveform.
- Motion
- Text reveals with subtle fades, graphic overlays, and a glowing, animated waveform that pulses with the beat.
Product Reveal
Introducing HAP: Design Haptics
“(No spoken dialogue — consistent, driving beat with pizzicato synth melodies and sub-bass elements)”
- On screen
- Sample project Playground Editor 0.0s 0.5s Generate Make every detail feel right. The croak of a frog The feeling of running Two quick, strong taps Enter a prompt Properties 9 left
- Camera
- Close-up on a mobile app UI, then a slight zoom out to reveal more of the interface, followed by a focus on a text input field.
- Motion
- UI elements animate into view, demonstrating interaction. Text input fields populate with example prompts, showcasing the product's AI capabilities.
Feature Teaser
Lottie Integration & Haptic Generation
“(No spoken dialogue — consistent, driving beat with pizzicato synth melodies and sub-bass elements)”
- On screen
- Imagine it. Describe it. Then feel it. And... Drop in a Lottie. Generate the feeling. Untitled Playground Editor Change File Generate haptics Lottie Generated a pattern from the animation.
- Camera
- Static text on a light background, then a close-up on a mobile app UI demonstrating Lottie file upload and haptic generation.
- Motion
- Text reveals with subtle fades. UI elements animate to show a Lottie file being uploaded, processed, and a haptic pattern being generated, with visual feedback.
Feature Teaser
Haptic Editing & Customization
“(No spoken dialogue — high-energy audio transitions with risers and sweeps, sub-bass drops/impacts at 0:34, 0:42, 0:50)”
- On screen
- Untitled Playground Editor Change File Generate haptics Lottie Generated a pattern from the animation. 0.0s 0.5s Feel haptics with Games Music Fitness Tools your app
- Camera
- Split-screen view of two mobile app UIs, then a full-screen view of the haptic editor, followed by a text reveal.
- Motion
- Seamless transitions between UI states, demonstrating editing capabilities with animated timelines and haptic waveform visualizations. Text animates in a vertical scroll effect.
Call to Action
HAP: Haptics for Everyone
“(No spoken dialogue — high-energy audio transitions with risers and sweeps, sub-bass drops/impacts at 0:34, 0:42, 0:50)”
- On screen
- HAP
- Camera
- Static text with a scrolling effect, then a blank screen, followed by the company logo appearing centrally.
- Motion
- Text elements scroll and fade, creating a dynamic list. The company logo animates in with a clean, impactful reveal.
Motion design primitives
Synthesizable in Remotion · key components of the hap-haptics-launch-template template.
TextFadeScroll
Text appears with a subtle fade-in effect while simultaneously scrolling vertically, often revealing new words or phrases in a list.
+ Code construction recipe
Utilize Remotion's 'interpolate' function for opacity and Y-position based on frame progress. Apply a 'spring' animation for a smooth, slightly bouncy scroll effect.
UIElementReveal
User interface elements, such as buttons, input fields, or waveform visualizations, animate into view with a clean, precise motion, often scaling or sliding.
+ Code construction recipe
Implement 'spring' animations for scale and translate properties. Use 'delay' and 'sequence' to orchestrate multiple UI elements appearing in a coordinated fashion.
HapticWaveformPulse
A glowing, often neon-colored waveform or bar graph animates, expanding and contracting to visually represent haptic feedback or sound intensity.
+ Code construction recipe
Render SVG paths or React Native Skia canvas elements. Animate stroke-width, fill opacity, and scale properties using 'interpolate' tied to audio analysis data or a predefined pattern. Apply a 'blur' filter for the glowing effect.
Style DNA & aesthetic system
Visual aesthetic
Typography
Motion
Special effects
Pacing & rhythm
Conceptual story rhythm
- 1
The Unfelt Experience
Purpose. Establish the problem: digital interactions lack tactile feedback, making them feel 'quiet'.
Execution. Simple text overlays posing the problem, followed by a generic app UI that appears static, then a pixelated hand graphic to introduce the concept of 'feeling'.
- 2
HAP's Solution: Intuitive Haptics
Purpose. Introduce HAP as the solution, demonstrating its core functionality for designing haptics.
Execution. Detailed UI walkthroughs showing how to create haptics from text prompts and visual timelines, emphasizing ease of use.
- 3
Advanced Haptic Creation
Purpose. Showcase advanced features like Lottie integration and fine-grained haptic editing.
Execution. Demonstrations of uploading Lottie files to generate haptics and then editing those haptics within a visual timeline editor, highlighting precision and control.
- 4
Universal Application & Call to Action
Purpose. Broaden the scope of haptics to various applications and conclude with the brand identity.
Execution. Scrolling text listing different use cases (Games, Music, Fitness, Tools) culminating in the HAP logo reveal.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Sample remix
Objective
Launch a new AI-powered sound design tool for game developers.How the recipe adapts
The video would open with text like 'Your game sounds good. But it feels... flat.' followed by a generic game UI. EchoSynth's UI would then be revealed, demonstrating how to generate unique sound effects from text prompts like 'the roar of a dragon' or 'a futuristic laser blast'. Advanced features would show waveform editing and layering, with glowing waveform visualizations. The final scene would list 'Games, VR, Film, Podcasts' before revealing the EchoSynth logo.Remix blueprint · hap-haptics-launch-template
Scene durations (5 scenes, 53.9s)
Key Remotion components
Related Creative Tools Product Launches
Explore all Creative Tools launches →
A vibe design partner with an AI-native canvas for turning ideas into UI.
We heard you wanted to use Codex rate limit resets on your own time. Starting today, we’re rolling out the ability to save rate limit resets to use later. We’re starting Go, Plus, Pro, and Business
There's a hidden tax on every knowledge worker in the world, and nobody talks about it: The design tax. You're a strategist, a sales lead, a marketer. You were hired for what you know. But every me…