---
name: remotion-animated-websites
description: Use Remotion concepts and tooling to design animated website experiences, embedded motion components, and web-native interactive visual storytelling patterns. Use when planning or building animated landing pages, scroll-driven sections, embedded product demos, hero animations, or website experiences that may use Remotion Player or Remotion-authored motion systems as a source.
---

# Remotion Animated Websites

Use this skill when the goal is an animated web experience rather than a rendered standalone video.

## Core approach

- Treat Remotion as a motion design system, not just a video renderer.
- Use Remotion compositions to prototype timing, sequences, and motion language.
- Use `@remotion/player` when embedding video-like motion into a website.
- Keep website performance and user control in mind.
- Prefer modular motion blocks that can live inside a product or marketing site.

## Best-fit use cases

- animated hero sections
- embedded product walkthroughs
- website motion prototypes
- scroll-storytelling ideas
- animated landing page modules
- reusable motion blocks for startup sites

## Recommended workflow

1. Decide whether the output is a rendered asset or a live embedded experience.
2. If live, favor embeddable compositions or exported segments used selectively.
3. Prototype motion in Remotion first.
4. Simplify for web performance before shipping.
5. Keep text, layout, and CTA clarity above animation cleverness.

## Official-tooling baseline

Official docs indicate `@remotion/player` is the right package when embedding Remotion videos into a React app.
Use the Player when website integration matters more than final video export.

## Read references as needed

- For setup and integration notes, read `references/setup.md`.
- For website-motion patterns, read `references/patterns.md`.
- For performance and design guardrails, read `references/performance.md`.

## Scope rule

Use this skill for web-native animation planning and embedding.
If the user wants exported marketing videos, use `remotion-marketing-videos` instead.


---

# Setup

## Official-doc takeaways

Based on the official Remotion docs:
- install `remotion` and `@remotion/cli` for the composition system
- install `@remotion/player` to embed a Remotion video in an existing React app
- use an entry point with `registerRoot()`
- preview compositions in Studio before integrating them elsewhere

## Website-oriented structure

```text
remotion/
  index.ts
  Root.tsx
  website/
    HeroMotion.tsx
    ProductWalkthrough.tsx
    TestimonialMotion.tsx
```

## Integration options

- use Remotion Player inside a React website
- export short motion assets and embed them as video where interactivity is not needed
- use Remotion compositions as motion prototypes, then recreate selected motion natively in the frontend if needed

## Decision rule

If the site needs true interactivity or scroll-linked motion, Remotion may prototype the behavior but should not automatically be the final runtime for every animation.


---

# Website Motion Patterns

## Good website uses

Use Remotion-authored motion for:
- product hero loops
- feature reveal modules
- explainer sections embedded in landing pages
- testimonial quote motion blocks
- before/after animations
- animated UI walkthroughs

## Design priorities

- clarity first
- fast visual understanding
- support the CTA instead of distracting from it
- keep loops tasteful and short
- use motion to direct attention, not just decorate

## Reusable block ideas

- animated headline reveal
- feature card stagger
- product UI zoom-and-highlight
- social proof carousel motion
- how-it-works step transitions
- animated stat counters paired with visual context

## Embedding mindset

For websites, think in blocks:
- hero block
- feature block
- proof block
- CTA block

This makes motion easier to reuse across pages.


---

# Performance and Guardrails

## Performance rules

- keep embedded motion lightweight
- avoid long autoplay sequences above the fold if they delay perception
- test responsive behavior early
- avoid shipping giant assets when a short loop or still-plus-motion would do
- use web-native animation when it is simpler than embedding a heavy motion system

## UX rules

- do not let animation block page comprehension
- keep calls to action visible and readable
- prefer subtle looping background motion over overwhelming hero chaos
- make motion support the message

## Practical decision rule

Use Remotion for web experiences when it helps prototype or embed polished motion quickly.
If pure frontend animation is lighter and simpler, use Remotion as the design source and implement the final effect natively.