Built-in Components

egaki ships a set of visual components that are available in MDX without imports. The full built-in map is: Fill, Background, LayoutTransition, AngledScreen, BandsShader, WaveGradientShader, LiquidGradientShader, DispersionRingsShader, BlurReveal, MaskedSlideReveal, StaggeredFadeUp, CodeBlock, ShimmerSweep, Img, Audio, Video, Opacity, Scale, TranslateX, TranslateY, Blur, GeneratedImage, GeneratedVideo, and GeneratedSpeech.

Animation primitives (Opacity, Scale, TranslateX, TranslateY, Blur) are covered in Animation. Shaders are covered in Shaders. Layout transitions have their own page.

Fill

A full-frame layer like Remotion's AbsoluteFill but with better defaults. Children stretch horizontally and center vertically.

123<Fill style={{ background: '#09090b' }}>
  <div style={{ fontSize: 72, color: 'white' }}>Centered content</div>
</Fill>

Prefer <Fill> over raw <AbsoluteFill> in egaki components.

Background

Renders behind section content. Use for gradient backgrounds, images, or videos:

123<Background>
  <BandsShader />
</Background>

BlurReveal

Animated text reveal with a blur-to-sharp transition:

1<BlurReveal text="Hello World" />

MaskedSlideReveal

Text reveal with a sliding mask animation:

1<MaskedSlideReveal text="Sliding reveal" />

StaggeredFadeUp

Children fade up one by one with staggered timing:

12345<StaggeredFadeUp>
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</StaggeredFadeUp>

ShimmerSweep

A shimmer sweep effect over content:

123<ShimmerSweep>
  <div style={{ fontSize: 48 }}>Shimmering text</div>
</ShimmerSweep>

CodeBlock

A ray.so-style syntax-highlighted code block powered by shiki, with multiple themes and window chrome styles:

123<CodeBlock language="typescript" filename="hello.ts">
{`const x = 42`}
</CodeBlock>

AngledScreen

CSS 3D perspective wrapper with fake depth-of-field. Wraps any children (images, videos, divs) in a 3D-rotated plane; the far edge is blurred automatically based on the rotation direction:

123<AngledScreen rotateY={-20}>
  <Img src="/screenshot.png" style={{ width: '100%' }} />
</AngledScreen>

Img and Video

Always use <Img> from egaki/video instead of raw <img>. The egaki version uses delayRender() to prevent blank frames during export.

12345<Fill>
  <Video src="/clip.mp4" muted loop objectFit="cover" />
</Fill>

<Img src="/photo.png" objectFit="cover" style={{ width: '100%', height: '100%' }} />

Use objectFit="cover" to fill the frame edge to edge, cropping excess content.

Audio

<Audio> from @remotion/media is available without import. Supports startInFrames, trimBefore, trimAfter, and volume:

1<Audio src="/music.mp3" volume={0.3} />

GeneratedImage, GeneratedVideo, GeneratedSpeech

AI-generated media components that render server-side and cache results to public/generated/. See Server Components.