Supabase Middleware — per-request logic · Launch Video Breakdown: Hook, Pacing & Motion Design

Scene-by-scene timeline & spoken transcript

1. 0:00 – 0:02

   The Hook

   Product Announcement

   “(No spoken dialogue — upbeat electronic synthesizer music)”

   On screen

   Introducing Supabase Middleware

   Camera

   Static centered typography with smooth fade and upward drift

   Motion

   Kinetic text fade and subtle vertical translation

2. 0:02 – 0:04

   Product Reveal

   Pipeline Overview

   “(No spoken dialogue — synthesizer beat with clicking accents)”

   On screen

   Supabase Middleware fetch: pipeline([ withCors({}), withRequiredClaims(), withSupabaseClient(), ], async (req, ctx) => { // ctx.supabase is scoped to the caller },

   Camera

   Split layout tracking shot settling into focus

   Motion

   Code block sliding in beside persistent title with green highlighting

3. 0:04 – 0:09

   Feature Teaser

   Cross-Platform Support

   “(No spoken dialogue — rhythmic drum beat with synth leads)”

   On screen

   Add per-request logic for Edge Functions Add per-request logic for Vercel Functions Add per-request logic for Bun Add per-request logic for NestJS Add per-request logic for all of them

   Camera

   Orbital rotation around a 3D cylindrical drum

   Motion

   Stepped mechanical roll showing framework logos, followed by a dispersed 3D icon burst

4. 0:09 – 0:13

   Feature Teaser

   Built-In Middleware Catalog

   “(No spoken dialogue — driving electronic bassline)”

   On screen

   Comes with built-in middleware withCors withFeatureFlag withClaims withRequiredClaims withSupabaseClient withSupabaseAdminClient withPostgresClient withPostgresAdminClient withOAuthProtectedResource

   Camera

   Frontal card grid view with focal depth shifting

   Motion

   Staggered card reveal with pulsing green glow borders

5. 0:13 – 0:16

   Feature Teaser

   Interactive Code Annotation

   “(No spoken dialogue — rhythmic electronic track)”

   On screen

   export default { fetch: pipeline([ withCors(), CORS headers withRequiredClaims(), ctx.jwtClaims withSupabaseClient(), ], async (req, ctx) => { const { data } = await ctx.supabase.from('todos').select() return Response.json(data) } }

   Camera

   Angled 3D perspective with shallow depth-of-field

   Motion

   Badge overlays popping in next to pipeline functions

6. 0:16 – 0:21

   Feature Teaser

   Custom Middleware Definition

   “(No spoken dialogue — continuous synth groove)”

   On screen

   Or define your own // Needs ctx.jwtClaims from an earlier entry, adds ctx.orgId const withOrg = defineMiddleware<'orgId', void, { jwtClaims: JWTClaims }, string>({ key: 'orgId', run: () => async (_req, ctx) => { const orgId = ctx.jwtClaims.app_metadata?.org_id if (typeof orgId !== 'string') { return Response.json({ error: 'No organization' }, { status: 403 }) } return { orgId } } })

   Camera

   Centered code editor with dynamic typing focus

   Motion

   Text-to-terminal transition followed by real-time code typing simulation

7. 0:21 – 0:25

   Call to Action

   Installation Call to Action

   “(No spoken dialogue — music resolves with final chords)”

   On screen

   npm install @supabase/middleware Try it today

   Camera

   Static front frame with terminal shifting down

   Motion

   Terminal typing simulation followed by header reveal