TANSTACK · Launch Video Breakdown: Hook, Pacing & Motion Design

Scene-by-scene timeline & spoken transcript

1. 0:00 – 0:07

   The Hook

   Inline CSS: The Core Concept

   “(No spoken dialogue — Ambient, subtle glow and fade-in effects accompany the visual explanation of CSS inlining.)”

   On screen

   <link rel="stylesheet" href="/assets/app.css" /> <style> .route { color: cyan; } </style> CSS is now inside HTML Inline CSS. Keep CDN rewrites. Route CSS rides with the first HTML response. Asset URLs still route through your CDN. Use inlining where CSS blocks paint. Separate CSS HTML + CSS REQUEST SSR HTML discover route.css first paint Inline route CSS CSS IN FIRST RESPONSE SSR HTML + route CSS first paint Matched route styles arrive before the browser paints. Keeps CSS as a separate file and cache entry.

   Camera

   Static, wide shot of the UI elements. Subtle background parallax.

   Motion

   Sequential reveal of code blocks and explanatory text, with a connecting arrow animation. Elements slide in from the left and right, and fade in.

2. 0:07 – 0:14

   Product Reveal

   Configuration & Control

   “(No spoken dialogue — Visuals focus on code snippets and feature highlights, with elements appearing and highlighting.)”

   On screen

   Build: inline route CSS. tanstackStart({ server: { build: { inlineCss: true, }, }, }) BUILD MANIFEST route CSS becomes inline-ready RUNTIME CONTROL toggle per request ASSET URLS `css-url` keeps CDN routing Runtime: opt out per request. const handler = createStartHandler({ handler: defaultStreamHandler, inlineCss: ({ request }) => request.headers.get('x-inline-css') !== 'false', }) Assets: rewrite CSS URLs too. transformAssets: (asset) => { if (asset.kind === 'css-url') { return 'https://static.example.com${asset.url}' } return 'https://cdn.example.com${asset.url}' }

   Camera

   Static, wide shot. Focus shifts between code blocks and feature summaries.

   Motion

   Code blocks and text elements animate in with a soft fade and slight scale. Highlight boxes appear around key configuration options.

3. 0:14 – 0:18

   Feature Teaser

   Asset Handling & CDN Integration

   “(No spoken dialogue — Visuals demonstrate how assets are transformed and routed, with elements appearing and connecting.)”

   On screen

   Inline CSS can still point at production assets. IN ROUTE CSS background: url('./dot.svg'); @import './font.css'; transformAssets - css-url AFTER TRANSFORMASSETS IMG https://static.example.com/assets/dot.svg CSS https://static.example.com/assets/font.css Fonts, images, and imports inside inlined CSS can still route through your CDN.

   Camera

   Static, wide shot. Elements appear and connect to illustrate the asset transformation flow.

   Motion

   Sequential reveal of code, a connecting arrow, and transformed asset URLs. Text fades in and out to emphasize points.

4. 0:18 – 0:32

   Call to Action

   Experience TanStack Start

   “(No spoken dialogue — A final call to action with a clear URL, using a subtle glow and text animation.)”

   On screen

   <link rel="stylesheet" href="/route.css" /> <style> /* matched route */ .app { color: #00BCD4; } </style> Inline matched route CSS Try it in TanStack Start tanstack.com/start

   Camera

   Static, wide shot. The final call to action text and URL appear prominently.

   Motion

   Text elements animate in with a soft, glowing fade. The URL appears with a subtle bounce and scale effect.