Hassan El Mghari · Launch Video Breakdown: Hook, Pacing & Motion Design
An open-source 3D map of the top AI startups in New York City.
0:00 · The Hook · Interactive 3D Map Overview
0:00 / 0:00
Scene-by-scene timeline & spoken transcript
The Hook
Interactive 3D Map Overview
“(No spoken dialogue — ambient visual with a subtle, consistent BPM of 110.)”
- On screen
- NYC AI Atlas An open-source 3D map of the top AI startups in New York City. Search 47 AI companies across six startup clusters. Frontier labs, creative tools, infrastructure, and media names mapped block by block across Manhattan and Brooklyn. 01 The Whole Board 47 02 Midtown Stack 12 03 Flatiron / Union Square 18 04 West Side / Chelsea 4 05 SoHo / NoHo 4 06 Tribeca / FiDi 4 07 Brooklyn Arc 5 Early Late Public Add your startup areas search click a pin Data: Lux NYC AI database - June 2024 How to explore Step through the neighborhoods Search any company CLICK Tap a pin for details NYC Pinecone Late OpenRouter Late Wiz Late Runway Late VAST Data Late AlphaSense Late Sandbar Early TIMES SQ N Nomic Dataku Late Modal Early Character.ai Late Conductor AI Early Diplo AI Norm AI Early Adonis Seek AI Early Crosby Early Hebbia Early Cohere Late Stainless API Early Hugging Face Late Diode Early Replit Late GUGGENHEIM EMPIRE STATE ST. PATRICK'S Together AI Late Vic.ai Early UN FLATIRON
- Camera
- Isometric 3D camera view of a stylized New York City map, slowly panning and rotating to reveal different clusters of AI startups.
- Motion
- Smooth, continuous camera pan and subtle rotation, combined with animated pop-up labels for company names and their funding stages (Early, Late, Public).
Product Reveal
Midtown Stack Deep Dive
“(No spoken dialogue — ambient visual with a subtle, consistent BPM of 110.)”
- On screen
- NYC AI Atlas An open-source 3D map of the top AI startups in New York City. Search 01 The Whole Board 47 02 Midtown Stack 12 The heavyweight corridor. Infrastructure and media names (voice AI, data platforms, dev tooling) anchored to the Grand Central transit nexus. 03 Flatiron / Union Square 18 04 West Side / Chelsea 4 05 SoHo / NoHo 4 06 Tribeca / FiDi 4 07 Brooklyn Arc 5 Early Late Public Add your startup areas search click a pin Data: Lux NYC AI database - June 2024 How to explore Step through the neighborhoods Search any company CLICK Tap a pin for details NYC HUDSON YARDS ROCKEFELLER TIMES SQ GRAND CENTRAL CHRYSLER ST. PATRICK'S Together AI Late AI/Data Infrastructure Cloud platform to train, fine-tune, and run open-source AI models. Late stage Satellite Office - 3rd Ave - Midtown East together.ai Jobs Copy link Vic.ai Early Gif.app Early Snowflake Public Dataminr Late Pinecone Late Wiz Late OpenRouter Late VAST Data Late AlphaSense Late Sandbar Early EMPIRE STATE FLATIRON UN
- Camera
- The camera zooms into the 'Midtown Stack' area, highlighting specific companies and revealing a detailed information panel for 'Together AI'.
- Motion
- Smooth camera zoom and pan, with a UI element expanding to show detailed company information. Pin markers animate to indicate selection.
Feature Teaser
Neighborhood Exploration & Interaction
“(No spoken dialogue — ambient visual with a subtle, consistent BPM of 110.)”
- On screen
- NYC AI Atlas An open-source 3D map of the top AI startups in New York City. Search 01 The Whole Board 47 02 Midtown Stack 12 03 Flatiron / Union Square 18 The Hudson edge, where frontier labs and late-stage operators share the waterfront with Chelsea's big-tech offices. 04 West Side / Chelsea 4 05 SoHo / NoHo 4 06 Tribeca / FiDi 4 07 Brooklyn Arc 5 Early Late Public Add your startup areas search click a pin Data: Lux NYC AI database - June 2024 How to explore Step through the neighborhoods Search any company CLICK Tap a pin for details NYC HUDSON YARDS FLATIRON EMPIRE STATE TIMES SQ ROCKEFELLER GRAND CENTRAL UN AlphaSense Late Sandbar Early Cohere Late Endex Early Seek AI Early Crosby Early Hebbia Early Modal Early Adonis Diplo AI Norm AI Early Conductor AI Early ONE WTC Stainless API Early Hugging Face Late Diode Early Replit Late
- Camera
- The camera smoothly navigates through different neighborhoods (West Side / Chelsea, SoHo / NoHo, Tribeca / FiDi, Brooklyn Arc), highlighting the corresponding areas on the map and updating the sidebar.
- Motion
- Sequential camera movements, panning and zooming to follow the highlighted neighborhood in the sidebar. Company pins dynamically appear and disappear based on the visible map area.
Call to Action
Full Map Reveal & Contribution
“(No spoken dialogue — ambient visual with a subtle, consistent BPM of 110.)”
- On screen
- NYC AI Atlas An open-source 3D map of the top AI startups in New York City. Search 47 AI companies across six startup clusters. Frontier labs, creative tools, infrastructure, and media names mapped block by block across Manhattan and Brooklyn. 01 The Whole Board 47 02 Midtown Stack 12 03 Flatiron / Union Square 18 04 West Side / Chelsea 4 05 SoHo / NoHo 4 06 Tribeca / FiDi 4 07 Brooklyn Arc 5 Early Late Public Add your startup areas search click a pin Data: Lux NYC AI database - June 2024 How to explore Step through the neighborhoods Search any company CLICK Tap a pin for details NYC Pinecone Late OpenRouter Late Wiz Late Runway Late VAST Data Late AlphaSense Late Sandbar Early TIMES SQ N Nomic Dataku Late Modal Early Character.ai Late Conductor AI Early Diplo AI Norm AI Early Adonis Seek AI Early Crosby Early Hebbia Early Cohere Late Stainless API Early Hugging Face Late Diode Early Replit Late GUGGENHEIM EMPIRE STATE ST. PATRICK'S Together AI Late Vic.ai Early UN FLATIRON github.com/hassanelmg/nyc-ai-atlas/blob/main/CONTRIBUTING.md
- Camera
- The camera smoothly zooms out to reveal the entire NYC AI Atlas map again, with all company pins visible, and a call to action to 'Add your startup' and a GitHub link.
- Motion
- Reverse camera zoom and pan to a wide, encompassing view. The 'Add your startup' button is highlighted, and a GitHub URL appears at the bottom, encouraging community contribution.
Motion design primitives
Synthesizable in Remotion · key components of the isometric-data-atlas-reveal template.
IsometricMapPanZoom
A 3D isometric map view that smoothly pans, zooms, and rotates to highlight different geographical areas and points of interest. Buildings and water bodies are rendered in a clean, stylized manner.
+ Code construction recipe
Utilize Remotion's `AbsoluteFill` and `ThreeCanvas` components. Implement camera controls with `useCurrentFrame` and `interpolate` for smooth `position` and `rotation` changes. Model the city using `react-three-fiber` with simple `BoxGeometry` for buildings and `PlaneGeometry` for water/land, applying basic `MeshStandardMaterial` for colors. Dynamic pin markers can be `Html` overlays positioned using `useThree`'s `project` function.
DynamicSidebarContent
A fixed sidebar UI element that dynamically updates its text content and highlights list items in sync with the map's camera movements and selected areas. Text content smoothly transitions in and out.
+ Code construction recipe
Employ `AbsoluteFill` for the sidebar container. Use `spring` or `interpolate` for `opacity` and `transform` (e.g., `translateY`) on text elements and list items to create smooth transitions when content changes. Conditional rendering based on the current `frame` or `scene` can control which text and list items are visible and highlighted.
InteractivePinReveal
Small, interactive pin markers that appear, disappear, and expand to reveal detailed information upon selection. Pins have a subtle bounce or scale animation on appearance and a clear visual indicator when active.
+ Code construction recipe
Render pins as `AbsoluteFill` children or `Html` elements within `ThreeCanvas`. Use `spring` for `scale` and `opacity` to animate their entrance and exit. When a pin is 'selected', trigger a `spring` animation to expand an associated information panel (e.g., a `div` with `width` and `height` transitions) and change the pin's color or icon.
Style DNA & aesthetic system
Dimension
Style DNA
Craft detail
Visual aesthetic
A clean, modern, and highly functional isometric 3D map interface with a focus on data visualization and interactive elements. The aesthetic is bright, airy, and uses subtle gradients to add depth.
—
Typography
Primarily Grotesque Sans-serif for all UI elements and map labels, ensuring high legibility and a modern, technical feel. Text treatments include varying weights and subtle color changes for hierarchy.
—
Motion
Smooth, deliberate camera movements with gentle ease-in/ease-out interpolation curves. UI elements use quick, responsive spring animations for pop-ins and transitions, indicating interactivity.
—
Special effects
Subtle ambient occlusion for depth, soft shadows under buildings, and a very slight, almost imperceptible lens blur at the edges of the frame to mimic a real camera lens.
—
Pacing & rhythm
Slow, exploratory pacing with a single scene cut across the entire 16.9 seconds, resulting in approximately 4 cuts/minute. This creates a continuous, immersive experience.
—
Conceptual story rhythm
- 1
Global Context
Purpose. Introduce the product's scope and overall value proposition.
Execution. Wide isometric view of the entire NYC AI Atlas, showcasing the breadth of companies and neighborhoods.
- 2
Deep Dive Interaction
Purpose. Demonstrate the product's ability to provide detailed information on specific entities.
Execution. Camera zooms into a specific neighborhood, and a company's info panel expands with details.
- 3
Exploratory Navigation
Purpose. Showcase the ease of navigating and discovering different segments of the data.
Execution. Sequential camera pans across various neighborhoods, with the sidebar updating to reflect the current area.
- 4
Community & Contribution
Purpose. Encourage user engagement and highlight the open-source nature of the project.
Execution. Camera zooms back out to the full map, highlighting the 'Add your startup' call to action and displaying the GitHub link.
Remix in Animatiq Studio
Master remix prompt · agent-ready
Recreate the visual style of the NYC AI Atlas video for a new product: 'Global Climate Tech Innovators Map'. Maintain the isometric 3D map perspective, smooth camera pans and zooms, and dynamic sidebar content. Adapt the color palette to reflect environmental themes (greens, blues, earthy tones). Ensure company pins animate on appearance and expand to show detailed information. The overall pacing should remain slow and exploratory, with minimal cuts, emphasizing continuous interaction. The final shot should reveal a call to action for contributing new climate tech startups.
Sample remix
Objective
Create a launch video for 'Global Climate Tech Innovators Map', an open-source 3D map of leading climate technology startups worldwide.How the recipe adapts
The IsometricMapPanZoom primitive will render a stylized global map with continents and oceans, instead of NYC. DynamicSidebarContent will display country/region-specific climate tech clusters and company details. InteractivePinReveal will show climate tech startup pins, perhaps with icons representing their focus (e.g., renewable energy, carbon capture). The color palette will shift to a vibrant green, deep ocean blue, and warm earth tones. The camera will smoothly traverse from a global view to specific regions like Silicon Valley, Berlin, or Singapore, highlighting local innovators, then zoom out to a global overview with a 'Contribute a Climate Tech Startup' call to action.Remix blueprint · isometric-data-atlas-reveal
Scene durations (4 scenes, 16.9s)
4s
3s
6s
3.9s
Key Remotion components
Related Developer Tools Product Launches
Explore all Developer Tools launches →
Hook 8.9204.0M
SpaceXAIDeveloper Tools
xAI opens voice cloning on its API: build a custom voice in about two minutes or pick from 80+ voices in 28 languages.
@SpaceXAI
Hook 9.178.3M
ClaudeDeveloper Tools
Claude can now operate your Mac, opening apps, browsing and filling spreadsheets, as a research preview in Cowork and Claude Code.
@claudeai
Hook 8.873.2M
xAIDeveloper Tools
Agentic CLI for coding, building apps, and automating workflows.
@SpaceXAI