What is sound effects & foley?

Content & VisualizationCatalog: Sound effects

Sound effects & foley

Also searched as: sound design, motion sfx, foley, audio accents, whooshes and risers, ui sounds

Canonical Definition

Sound effects and foley are acoustic accents — whooshes, clicks, impacts, risers, and ambient drones — that make visual motion feel physical and tactile.

Duration

Whooshes: 10-18 frames; Hits: 30-90 frames decay; UI clicks: 3-6 frames

Motion graphics on their own are visually silent; sound design provides physical weight. An animated card slamming into frame without sound looks like pixels shifting; the same card paired with a low-frequency impact thud feels heavy and tangible.

In programmatic video engines, audio tracks are placed on the exact frame offset of visual impact, ensuring zero drift between audio and video.

Frame-Accurate Audio Synchronization

Aligning sound transients to visual impact frames

A sound effect contains a peak transient (the loudest hit). In Remotion, placing `<Audio>` with an offset that aligns this transient with the visual landing creates perfect tactile synergy.

AudioSyncExample.tsxtsx

import { Audio, staticFile } from "remotion";

export const ImpactBeat = () => {
  // Visual impact occurs on frame 24
  // The whoosh riser begins 12 frames prior on frame 12
  return (
    <>
      <Audio src={staticFile("audio/whoosh-fast.mp3")} startFrom={0} endAt={24} />
      <Audio src={staticFile("audio/sub-drop-hit.mp3")} startFrom={24} />
    </>
  );
};

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

Mix SFX at least -6dB to -12dB below the main voiceover to preserve vocal clarity.
Use high-pass filters on whooshes so they don't muddy the low-end bass of background music.

Common Failure Modes (What to avoid)

Using loud, clipping audio effects that overwhelm background voiceover or music.
Misaligning audio: even a 2-frame delay between visual impact and sound breaks the illusion of physics.

Working catalog implementations

Typed Remotion components ready to drop into code.

Browse all sound effects

component

Logo Sting

Crisp, high-impact vector sting with radial shockwave, impact flash, and specular sheen sweep resolving into brand lockup.

component

Headline Slam

A heavyweight headline scales down into frame, lands with a deterministic three-frame shake, holds with subtle drift, and whips upward on exit.

block

Split-Flap Board

Solari-style departure board: every cell walks its drum forward through the intervening characters of a fixed alphabet until it lands on its target, so the text resolves as a mechanical cascade instead of a fade.

Generate with AI

Build sound effects & foley in Animatiq

Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.

Launch in composer

Related motion principles

Text & Identity