--- title: "Deep-Fried Video Engineering" description: "Deep-Fried Video Engineering Generating Gen-Z podcast intros with Remotion: squash-and-stretch rabbits spiraling into black holes, chromatic aberration via CSS drop-shadows, and eerie synthesized dron…" doc_version: 1 last_updated: 2026-10-17 canonical_url: "http://parc.yolo.scapegoat.dev/note/research/institute/magazine/issues/001/drafts/cover-story-deep-fried-video-engineering" --- # Deep-Fried Video Engineering Deep-Fried Video Engineering Generating Gen-Z podcast intros with Remotion: squash-and-stretch rabbits spiraling into black holes, chromatic aberration via CSS drop-shadows, and eerie synthesized dron… ## Content # Deep-Fried Video Engineering **Generating Gen-Z podcast intros with Remotion: squash-and-stretch rabbits spiraling into black holes, chromatic aberration via CSS drop-shadows, and eerie synthesized drones. A technical love letter to intentionally terrible aesthetics.** *By the Editors of The Golem Review* --- There is a rabbit on the screen and it is about to have a very bad day. For the first eight frames — a quarter of a second at 30 FPS — it squashes. Its horizontal scale inflates to 1.3x while its vertical scale compresses to 0.7x, the classic animator's anticipation beat: something is about to move, but first it gathers itself. The rabbit does not know what is behind it. The audience does. There is a black hole at pixel coordinate (640, 360) and the math is already written. At frame 8, the pull begins. Over the next 45 frames, the rabbit accelerates along a parameterized path from x=250 to x=640, stretching horizontally to 0.8x and vertically to 1.2x as the speed increases — the elongation of a body under acceleration, as old as the Fleischer brothers. The scale factor simultaneously collapses from 2.5 to 0.1. Spiral rings appear. Particle debris streams inward. The background darkens from 10% gray to 3% gray. Chromatic aberration — red and cyan drop-shadows offset by increasingly aggressive pixel counts — splits the rabbit into trembling afterimages. A synthesized drone, bitcrushed to 4-bit resolution and lowpass-filtered at 800 Hz, rises in volume from 0 to 0.6 as the motion phase passes 0.1. At frame 53, the rabbit enters the spiral phase. It rotates, shrinks to nearly nothing, and vanishes. The void drone peaks. A deep-fried impact hit — tanh-clipped at distortion amount 5, which means the waveform is a series of brutalized plateaus — slams in at frame 60. Glitch blocks flash. The screen goes black. The whole thing takes three seconds. It is the intro for a podcast about falling down rabbit holes with ChatGPT, and every pixel of it was generated programmatically by a React component. --- ## I. Why Programmatic Video The conventional path to a podcast intro involves After Effects, a timeline, keyframes, and a render queue. It works. It has worked for decades. But it produces an artifact — a `.mp4` file — not a program. The intro cannot be parameterized. It cannot accept different text, different durations, different color palettes without manual re-editing. It cannot be version-controlled. It cannot be reviewed in a pull request. It cannot be tested. Remotion is a React framework that inverts this relationship. A video is a React component. Each frame is a render. The component receives the current frame number via `useCurrentFrame()` and returns JSX that describes what that frame looks like. The result is code that produces video, not video that was produced by a human moving keyframes in a timeline. This matters for a podcast with recurring segments. The "rabbit hole" concept — a rabbit being sucked into a void — is a template. Different episodes could have different text overlays, different audio, different visual intensity. A programmatic intro is a function call: change the parameters, render again. The source of truth is a TypeScript file, not a binary project file locked in a proprietary application. The Rabbit Hole project (`003-rabbit-hole/`) contains three compositions: | Composition | Concept | Duration | Frames | |---|---|---|---| | **TheVoid** | Rabbit sucked into black hole, squash-and-stretch | 3.0s | 90 | | **TikTokTitle** | "RABBITHOLE" text, letter-by-letter bounce reveal | 5.5s | 165 | | **RabbitHole** | Original laser-eyes version (superseded) | 3.0s | 90 | The aesthetic is deliberate: Gen-Z deep-fried. Monochrome. Glitchy. Scanlines. Noise overlays. Bitcrushed audio. The visual language of shitposts, ironic memes, and TikTok chaos — applied to a podcast about AI. The ugliness is the point. This article documents how every effect in the pipeline works, from the mathematical structure of squash-and-stretch animation through the signal-processing chain that produces eerie synthesized audio, to the performance patterns required to make Remotion render it all without choking. --- ## II. The Frame as Unit of Computation Everything in Remotion starts with `useCurrentFrame()`. The hook returns an integer — 0, 1, 2, ..., 89 for a 90-frame composition — and the component's job is to compute everything about the current visual state from that single number. There is no timeline. There is no stored state between frames. Each frame is a pure function of its index. ```tsx const frame = useCurrentFrame(); const { fps, width, height, durationInFrames } = useVideoConfig(); ``` `useVideoConfig()` provides the composition's metadata: frame rate (30 FPS), dimensions (1280x720), and total duration (90 frames for TheVoid). These values are declared in `Root.tsx` when the composition is registered: ```tsx ``` The frame number is the only input. All motion, all visual effects, all audio dynamics are computed from it. This is the key conceptual shift from timeline-based animation: instead of recording keyframes and interpolating between them in an editor, you write a function that maps frame numbers to visual properties. The function is the animation. The core mapping function is `interpolate()`: ```tsx const opacity = interpolate(frame, [0, 30], [0, 1]); ``` This maps frame 0 to opacity 0, frame 30 to opacity 1, with linear interpolation between. The function generalizes to multi-stop mappings: ```tsx const position = interpolate(frame, [0, 15, 30, 45], [300, 250, 500, 640]); ``` Here, the value moves from 300 to 250 (frames 0-15), then accelerates to 500 (frames 15-30), then continues to 640 (frames 30-45). Each segment interpolates linearly between its stops. The motion is piecewise linear — a rough approximation of a smooth curve, but often good enough, and when it's not, easing functions smooth it out. Without clamping, `interpolate()` extrapolates beyond its defined range. Frame 60 in a `[0, 30]` input range produces a value beyond the output range. In practice, nearly every `interpolate()` call wants clamping: ```tsx const scale = interpolate(frame, [0, 30], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); ``` This is so common that forgetting it is the most frequent source of visual bugs in Remotion code. A particle that should have faded to zero opacity instead has negative opacity (clamped to 0 by CSS, so invisible — correct by accident). A scale factor that should stay at 1.0 after the animation ends instead grows to 3.0 and the element distorts. The fix is always the same: add clamping. --- ## III. The Anatomy of a Squash-and-Stretch The central animation in TheVoid is a squash-and-stretch cycle — the oldest trick in character animation, codified by Disney's Twelve Principles in the 1930s and still the fastest way to make a moving object feel like it has mass, elasticity, and inertia. The principle: when an object anticipates motion, it compresses along the axis of movement (squash). When it accelerates, it elongates along the axis of movement (stretch). When it decelerates, it compresses again. The volume should remain roughly constant — wider means shorter, taller means thinner. In TheVoid, the rabbit's entire 90-frame life is parameterized by a single variable, `motionPhase`, which progresses from 0 (rest) to 1 (consumed by void): ```tsx const anticipationFrames = 8; const pullFrames = 45; const motionPhase = interpolate( frame, [0, anticipationFrames, anticipationFrames + pullFrames, durationInFrames], [0, 0.15, 0.8, 1] ); ``` Frames 0-8 map to motionPhase 0-0.15 (anticipation). Frames 8-53 map to 0.15-0.8 (the pull). Frames 53-90 map to 0.8-1.0 (spiral and vanish). The mapping is not linear in time — anticipation is short and slow, the pull is long and accelerating, the spiral is fast. The squash and stretch factors are then functions of `motionPhase`, not of `frame` directly. This is the layered parameterization pattern: frame -> motionPhase -> squashX/squashY. It allows the timing to be adjusted (change the frame breakpoints) without affecting the shape of the deformation (the squash/stretch values at each phase), and vice versa. ```tsx const squashX = interpolate( motionPhase, [0, 0.1, 0.5, 0.9, 1], [1, 1.3, 0.8, 1.2, 2] ); const squashY = interpolate( motionPhase, [0, 0.1, 0.5, 0.9, 1], [1, 0.7, 1.2, 0.8, 0.5] ); ``` The five stops describe the deformation through the entire motion: | motionPhase | squashX | squashY | What's happening | |---|---|---|---| | 0.0 | 1.0 | 1.0 | Rest. Rabbit is normal proportions. | | 0.1 | 1.3 | 0.7 | **Anticipation squash.** Rabbit widens and shortens — gathering itself, compressing like a spring. | | 0.5 | 0.8 | 1.2 | **Pull stretch.** Rabbit narrows and elongates — accelerating toward the hole, body stretching under the force. | | 0.9 | 1.2 | 0.8 | **Spaghettification begins.** Rabbit re-widens slightly as it reaches the hole's event horizon. | | 1.0 | 2.0 | 0.5 | **Consumed.** Extreme horizontal stretch, extreme vertical compression — the rabbit is pulled into an impossibly wide, impossibly flat shape. | Note the volume approximation: at motionPhase 0.1, squashX * squashY = 1.3 * 0.7 = 0.91. At 0.5, it's 0.8 * 1.2 = 0.96. At 1.0, it's 2.0 * 0.5 = 1.0. The volume is approximately conserved, as the principle requires. On top of the squash/stretch, the rabbit's overall scale shrinks from 2.5 (looming, close to camera) to 0.1 (nearly invisible, consumed by the void): ```tsx const rabbitScale = interpolate(motionPhase, [0, 1], [2.5, 0.1]); ``` The final transform combines all three: ```tsx transform: `scaleX(${rabbitScale * squashX}) scaleY(${rabbitScale * squashY})` ``` At motionPhase 0 (frame 0): scaleX = 2.5 * 1.0 = 2.5, scaleY = 2.5 * 1.0 = 2.5. The rabbit is large and round. At motionPhase 0.1 (frame ~8): scaleX = ~2.3 * 1.3 = ~3.0, scaleY = ~2.3 * 0.7 = ~1.6. The rabbit bulges outward — fat and squat, like a ball hitting a wall. At motionPhase 0.5 (frame ~30): scaleX = ~1.2 * 0.8 = ~1.0, scaleY = ~1.2 * 1.2 = ~1.4. The rabbit is tall and thin — a streak of motion. At motionPhase 1.0 (frame 90): scaleX = 0.1 * 2.0 = 0.2, scaleY = 0.1 * 0.5 = 0.05. The rabbit is an impossibly flat smear — a last glimpse before the void swallows it. The spatial path follows a similar multi-stop interpolation: ```tsx const rabbitX = interpolate(motionPhase, [0, 0.1, 0.5, 1], [300, 250, 500, 640]); const rabbitY = 360 + Math.sin(frame * 0.3) * (20 * (1 - motionPhase)); ``` The X path has the anticipation pull-back: the rabbit starts at x=300, retreats to x=250 during the squash (motionPhase 0-0.1), then accelerates through x=500 to x=640 (the hole's center). The Y path adds a sinusoidal wobble — `Math.sin(frame * 0.3) * 20` — that dampens as `motionPhase` approaches 1. The wobble gives the rabbit a sense of struggling against the pull, and its dampening gives the pull a sense of inevitability. --- ## IV. Deep-Fried Visual Effects as CSS The "deep-fried" aesthetic is a specific visual language originating from internet meme culture: images that have been JPEG-compressed, contrast-boosted, color-shifted, and noise-overlaid until they look like they were rescued from a dumpster behind a screen printing shop. The aesthetic communicates irony, absurdity, and a deliberate rejection of polish. In motion graphics, the deep-fried look requires several simultaneous effects. Each is implemented as CSS on the Remotion component tree. ### Chromatic Aberration Real chromatic aberration occurs when a lens fails to focus all wavelengths of light to the same point, producing color fringing at high-contrast edges. The deep-fried version exaggerates this to the point of visual discomfort: red and cyan afterimages offset by multiple pixels. The implementation uses CSS `drop-shadow`, which creates a colored copy of the element's alpha channel at an offset position: ```tsx const pulse = (Math.sin(frame * 0.3) + 1) / 2; const aberration = 2 + pulse * 6;
���
``` Two drop-shadows: one red, offset right; one cyan, offset left. The offset distance (`aberration`) oscillates between 2 and 8 pixels, driven by a sinusoidal pulse at frequency 0.3 radians per frame. The result: the rabbit shimmers with red and cyan afterimages that breathe in and out. Why `drop-shadow` and not `box-shadow`? `box-shadow` creates a shadow of the element's rectangular bounding box. `drop-shadow` creates a shadow of the element's alpha channel — the actual shape of the rendered content. For emoji and text, this produces properly shaped color fringing. For a rectangular `div`, they would be equivalent. The 0.5 alpha on the shadow colors is important. Full opacity (1.0) would create opaque red and cyan copies that obscure the original element. At 0.5, the copies are translucent — they tint the edges without hiding the content. The visual effect is that the rabbit appears to vibrate between color channels, as if the signal carrying it from screen to eye is degrading. ### Monochrome Palette All color is eliminated through CSS filter stacking: ```tsx ``` The `grayscale(1)` filter desaturates everything to zero chroma. The contrast multiplier (which increases with `bgIntensity`, itself a function of frame) pushes the midtones toward black and white, increasing the harshness. The background gray value decreases over the animation — the world literally darkens as the void grows stronger. The monochrome palette is critical to the deep-fried aesthetic because it eliminates the "designed" quality of color palettes. A monochrome image looks like it's been through something — photocopied, faxed, screen-captured, re-compressed. It suggests degradation. ### Screen Shake Pseudo-random displacement, driven by the frame number through a hash-like trigonometric function: ```tsx const fastShake = (frame: number, intensity: number) => { const f = Math.floor(frame * 3); return { x: Math.sin(f * 7.31) * intensity, y: Math.cos(f * 11.17) * intensity, }; }; ``` The `frame * 3` multiplier makes the shake update three times per frame (since the input is floored, this creates a stepped, jittery motion rather than a smooth oscillation). The irrational-ish multipliers 7.31 and 11.17 ensure that the X and Y shake are not correlated — the displacement looks random rather than circular. The intensity parameter increases over the animation, so the shake builds from a gentle tremor to a violent seizure as the void's pull intensifies. Why not actual random numbers? Remotion renders each frame independently. If the shake used `Math.random()`, each render of the same frame would produce different displacement, causing visual inconsistency in the preview (where frames can be rendered out of order) and making the output non-deterministic. The trigonometric pseudo-random function is deterministic — frame 42 always produces the same shake offset — while looking random to the eye. ### Scanlines Horizontal lines overlaid at low opacity, simulating a CRT display: ```tsx
``` Every 4 pixels, a 2-pixel-tall dark band at 15% opacity. The effect is subtle at 720p but immediately reads as "old technology" or "surveillance footage" — connoting the mediated, degraded quality that the deep-fried aesthetic requires. ### Noise Overlay Fractal noise generated via an inline SVG data URI: ```tsx
``` The SVG uses `feTurbulence` to generate Perlin noise at high frequency (0.8) with 4 octaves of detail. The noise is static — the same pattern every frame — which reads as film grain or analog noise rather than digital interference. At 10% opacity, it adds a barely-visible texture that prevents the monochrome background from looking digitally clean. The inline SVG trick avoids a separate image file. The data URI is generated once and applied as a CSS background. It tiles automatically. No external dependencies. ### Glitch Blocks Rectangular blocks of white that flash on screen for 1-2 frames, simulating digital compression artifacts: ```tsx {frame % 17 === 0 && (
)} ``` The glitch appears every 17th frame (chosen because 17 is prime, so the pattern doesn't sync with any other periodic effect). The position and size are pseudo-random functions of the frame number, using the same trigonometric hash technique as the shake. The blocks are bright white against the monochrome background — a burst of visual noise that breaks the smoothness of the animation for a single frame. --- ## V. Easing: The Shape of Time Linear interpolation produces motion that starts and stops instantaneously — physically impossible and visually jarring. Easing functions reshape the interpolation curve to produce motion that accelerates, decelerates, or overshoots. Remotion provides `Easing.bezier(x1, y1, x2, y2)`, which defines a cubic-bezier curve identical to CSS `cubic-bezier()`. The four control points determine the shape of the mapping from input progress (0 to 1) to output progress (0 to 1). Three curves appear repeatedly in the Rabbit Hole compositions: ```tsx // Crisp UI entrance (strong ease-out) const enter = Easing.bezier(0.16, 1, 0.3, 1); // Playful overshoot (bounces past target) const bouncy = Easing.bezier(0.34, 1.56, 0.64, 1); // Extreme bounce for squash-stretch const extreme = Easing.bezier(0.68, -0.55, 0.265, 1.55); ``` The second curve is the one that gives TikTokTitle its character. A `y1` value of 1.56 means the curve overshoots 1.0 — the output progress exceeds 100% before settling back. Applied to scale, this means a letter bounces in slightly too large before settling to its final size. Applied to position, it means a letter slides past its target and bounces back. The TikTokTitle uses this overshoot for its letter reveal: ```tsx const bounce = interpolate(frame, [0, 20, 30], [0, 1.4, 1], { easing: Easing.bezier(0.34, 1.56, 0.64, 1), extrapolateLeft: "clamp", extrapolateRight: "clamp", }); ``` Each letter appears, overshoots to scale 1.4, and settles back to 1.0. With letters staggered 6 frames apart, the word "RABBITHOLE" bounces across the screen letter by letter, each one slightly too enthusiastic before finding its place. For the anticipation beat in TheVoid, the curve needs the opposite character — a brief reversal before the forward motion: ```tsx const progress = interpolate(frame, [0, 20, 50], [0, 0.15, 1], { easing: Easing.bezier(0.25, 0.1, 0.5, 1), }); ``` This curve starts slow (the rabbit gathering itself), then accelerates smoothly through the pull phase. Combined with the spatial pull-back (x retreats from 300 to 250 before advancing to 640), the result feels like a slingshot: the rabbit is pulled backward by the void's gravity, held for a beat, then released. --- ## VI. Synthesized Audio: Making a Void Sound Like Something A void has no sound. This is inconvenient for a podcast intro. The audio for TheVoid was synthesized from scratch using Python with NumPy and SciPy — no samples, no sound libraries, no recorded material. Every sound is generated mathematically and processed through a signal chain designed to produce the specific character of "eerie, cheap, and broken." ### The Audio Stack Six audio files, each synthesized for a specific role in the animation: | File | Duration | Role | Key frequency | Processing | |---|---|---|---|---| | `void_drone.wav` | Loops | Background atmosphere | 55 Hz fundamental | Bitcrush 4-bit, lowpass 800 Hz | | `rabbit_pull.wav` | 3.0s | Motion-synced bass | 80 Hz sweep | Distortion 5, lowpass 1200 Hz | | `squish.wav` | 0.5s | Anticipation impact | Noise burst | Envelope: fast attack, fast decay | | `suck_whirl.wav` | 1.5s | Spiral entry | 2000 Hz descending | Bitcrush 6-bit, bandpass | | `deep_fried_hit.wav` | 0.3s | Final impact | Broadband | Distortion 8, bitcrush 3-bit | | `glitch_burst.wav` | 0.8s | Random texture | White noise | Bitcrush 2-bit, gate | ### The Signal Chain Every sound passes through the same processing chain, with different parameters: ```python base_tone + oscillators → envelope → distortion → bitcrush → filter → normalize ``` **Base tone generation:** Simple sine waves, combined additively. The void drone starts with a 55 Hz fundamental (low A, the bottom of audible rumble) and adds harmonics at intervals that produce dissonance — minor seconds, tritones, frequencies that clash and beat against each other. **Envelope shaping:** Each sound gets an amplitude envelope that controls its volume over time. The void drone has no envelope (it loops). The squish has a near-instantaneous attack (2ms) and a fast decay (50ms) — a percussive impulse that hits and dies. The pull sound has a slow attack (500ms) and sustains through the animation, matching the visual motion. **Distortion** is `tanh` clipping: ```python def apply_distortion(audio, amount=5): return np.tanh(audio * amount) / np.tanh(amount) ``` `tanh` maps any input to the range (-1, 1), but with a soft knee — values near zero pass through nearly unchanged, while large values are compressed toward the limits. The `amount` parameter controls how aggressively signals are pushed into the compression region. At amount=5, any sample above about 0.2 is driven hard into the tanh curve's plateau, producing a warm, buzzing distortion. At amount=8 (used for the final impact), even quiet signals are distorted — the waveform is nearly a square wave, all plateau and no transition. The division by `np.tanh(amount)` normalizes the output so that the peak amplitude is still 1.0 regardless of the distortion amount. Without normalization, higher distortion amounts would reduce the peak level. **Bitcrushing** reduces the effective bit depth: ```python def bitcrush(audio, bits=4): levels = 2 ** bits return np.round(audio * levels) / levels ``` At 4 bits, the signal is quantized to 16 discrete levels. The smooth curves of a sine wave become a staircase. The audible result is a grainy, lo-fi quality — the sound equivalent of a low-resolution image. At 2 bits (4 levels), the sound is nearly a square wave: only four possible amplitudes, producing a harsh, retro-game-console buzz. At 3 bits (8 levels), the deep-fried hit lands somewhere between — recognizably a sound, but audibly damaged. **Filtering** uses SciPy's Butterworth filter: ```python def lowpass_filter(audio, cutoff=800, sr=44100, order=4): nyq = sr / 2 normal_cutoff = cutoff / nyq b, a = butter(order, normal_cutoff, btype='low') return filtfilt(b, a, audio) ``` The void drone's 800 Hz lowpass removes all high-frequency content, leaving only the rumbling fundamental and low harmonics. The result sounds muffled, underground, distant — as if heard through a wall. This is the sonic equivalent of the monochrome visual palette: stripping away clarity to suggest degradation and mediation. ### Audio Placement in Remotion Each synthesized file is placed in the composition using Remotion's `