Using a motion design template

A motion template is a ready-made piece of animation: either a UI animation to drop into a page, or a video composition to render as MP4. Either way you get files. Nothing runs at install time, and your agent can then adapt them to your project.

What you download

Each page in the motion catalog shows the template's family, a preview, the original license and a link to the source. The files are the author's, in their original version. Three families come up most:

Install the template

Same as any other resource: install prompt, command or ZIP. Pick whichever suits you from the page (see Install your first resource).

Read https://palatekit.com/en/motion/<slug>/install.md and follow the instructions to install it.

npx --yes palatekit@latest install <slug>

Replace the slug with the one on the page you chose.

Add a UI animation

An Animata component is added by copy and paste: its documentation describes integration with "a simple copy and paste". Motion-Primitives also supports manual copying from the component page, or a command that adds the component to your project, for example Text Effect:

npx motion-primitives@latest add text-effect

Its prerequisites, per its installation guide: Tailwind CSS, the motion package, a cn helper (clsx and tailwind-merge) and Lucide React for icons. Uiverse elements are plain CSS or Tailwind with no particular dependency.

The easiest route is to let the agent do it. A prompt that works well:

Add the component from the motion/ folder to my home page, behind the heading.
Use my colors and fonts, check for missing dependencies
and tell me which ones you want to add before installing them.

Read the dependencies it proposes before accepting. That is the only step where something is actually installed, and you approve it.

Render video with HyperFrames

HyperFrames turns an HTML composition into video: it steps through the timeline in a headless browser one frame at a time, then encodes the result with FFmpeg. It needs Node.js 22 or later and FFmpeg. Animations must be seekable to an exact moment, which is the case for components designed for it.

From the project folder:

npx hyperframes preview
npx hyperframes render --output output.mp4

The first command opens a browser preview, the second produces the file. For an overlay on another edit, export transparent WebM:

npx hyperframes render --format webm --output overlay.webm

A composition can also take different text at render time, using the --variables option followed by a JSON object. To compare HyperFrames with Remotion, see HyperFrames or Remotion?.

Respect prefers-reduced-motion

Some people are bothered by, or made ill by, a lot of on-screen movement, especially large zooming or panning. Their system has a "reduce motion" setting, which CSS reads through prefers-reduced-motion. It has two values: no-preference and reduce.

A copied component does not always honor it. Ask your agent:

For this component, when prefers-reduced-motion is reduce,
remove scale and translate movement
and keep at most a subtle fade.

In CSS the idea is to redefine the animation in a rule placed after the original one:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: fade 4s linear infinite both;
  }
}

This only applies to web pages. A rendered video cannot read the setting: if it plays on your site, avoid autoplaying fast motion, or offer a still image instead.

Check the result

• Open the page and watch the animation on a phone.
• Turn on reduced motion in the system or in the browser's developer tools, then reload.
• For a video, watch the whole MP4 before publishing.
• Check the license and notice that come with it: they apply to the original files. See also safety guidelines.