FAQ

Answers about missing styles, Next.js, updating components and performance.

#Should I import from the package or copy with the CLI?

Import from the package if you do not need to change the source — upgrades are a version bump. Copy with the CLI when you need deep customisation and want to own the code. You can mix both; see the introduction.

#Components have no styles, or timings look wrong?

Make sure your entry imports @elyri/motion/styles.css (or @elyri/ui/styles.css for UI components). It defines the global variables components rely on.

#Does it work with the Next.js App Router?

Yes. Components use hooks and browser APIs, so render them from client components: add 'use client' to the file that uses them, or to the copied component file.

HeroBackground.tsx

'use client';

import { Aurora } from '@elyri/motion';

export function HeroBackground() {
  return <Aurora />;
}

#How do I update a component copied with the CLI?

Upgrade the package to the latest version, then run elyri add <component> --overwrite. Overwriting discards local edits, so commit first and merge your changes back with a diff.

#Which React versions are supported?

React 18 and 19.

#Will several WebGL backgrounds slow the page down?

Backgrounds pause when offscreen or in a background tab, so only visible ones use the GPU. Still, keep one heavy background per screen and consider lighter settings (speed, density) on mobile.

#Found a bug or want a new component?

Open an issue or pull request on the GitHub repository.