Effects for a bigger screen.

31 native effects for backgrounds, materials, particles, charts, and more. Install a small pack, import it into your MDX, and present.

Use Fluid

Real captures from the macOS development app.

One import away.

  1. 01 / INSTALL

    Effects ship in small, versioned packs. Slides shows the pack and version before installing it.

    legend-slides://effects/install?pack=backgrounds
  2. 02 / IMPORT

    Import an effect into your MDX like any component. Only what you import enters the deck.

    import { Fluid } from "slides:backgrounds/Fluid";
  3. 03 / PRESENT

    A lockfile beside the deck pins exact versions. Compiling and playback make no network requests.

    <Background><Fluid /></Background>

Every effect.

Each one comes with a complete example deck. Open it in Slides, or copy the MDX into your own.

31 effects

Animated title

typography

Sixteen entrances for words, letters and whole headings; four curated starting points.

Ambient aurora

backgrounds

Soft animated ribbons of color.

Droplets

backgrounds

A liquid droplet field with smooth unions.

Fluid

backgrounds

Flowing color and light.

Wireframe

backgrounds

An animated geometric wireframe.

Glass atmosphere

backgrounds

Ambient refracted glass forms.

Interactive glass

backgrounds

A WebGPU glass atmosphere.

Glass panels

materials

Rounded panels rendered together on one glass surface.

Glass strike

materials

Strike a glass panel, shatter it and optionally resolve to a check.

Upward flames

materials

Fire grows upward from a bar using the shared step clock.

Falling sprites

materials

Images fall through fire, splash and accumulate on the stage floor.

Image shatter

materials

Reveal an image, then break it into falling pieces.

Prismatic tear

materials

Timed image distortion over captured slide content.

Soft ripple

materials

Timed image distortion over captured slide content.

Refraction

materials

Rounded glass regions refract and blur their captured content.

Glow field

particles

A configurable particle program executed by the host WebGPU renderer.

Constellation

particles

A configurable particle program executed by the host WebGPU renderer.

Interface reveal

particles

A configurable particle program executed by the host WebGPU renderer.

Trajectory emitter

particles

Repeat arbitrary content along native keyframe paths.

Branch fan

diagrams

Curved, illuminated ribbons connect a root to caller-defined endpoints.

Progressive detail

presenting

Reveal and compare caller-supplied content while keeping its state mounted.

Comparison wipe

presenting

Reveal and compare caller-supplied content while keeping its state mounted.

Content swap

presenting

Reveal and compare caller-supplied content while keeping its state mounted.

Exploded layers

presenting

Reveal and compare caller-supplied content while keeping its state mounted.

Spotlight and callouts in Legend Slides

Spotlight and callouts

presenting

Measured attention overlays follow targets through stage scaling.

Code walkthrough

presenting

Emphasize and scroll to selected lines of source.

Freeze and annotate

presenting

Pause a controlled animation and show annotations without remounting it.

Chart bar

charts

A textured animated bar with optional grouping colors.

Animated chart row

charts

Stable labels and changing values move with an animated chart bar.

Media carousel

media

A configurable filmstrip with focus blur and retained content.

Lottie animation

animation

Native Lottie playback synchronized with the shared slide clock.

Go further

Effects are React Native components in versioned packs. Learn how decks pin them, or publish your own.