Getting Started

Quick Start

The fastest way to add a Motioness animation to your site is with an iframe:

<iframe
  src="https://motioness.com/embed/text-reveal"
  style="width:100%;aspect-ratio:1920/1080;border:none;border-radius:12px"
  loading="lazy"
  title="text reveal animation"
></iframe>

That renders a live text-reveal animation. Change the template ID to any of the 24+ available templates. Use URL params to customize.

Embed Methods

<iframe
  src="https://motioness.com/embed/announcement?headline=v2.0+Released"
  style="width:100%;aspect-ratio:1920/1080;border:none"
  loading="lazy"
/>

npm install @motioness/react

import { Motioness } from "@motioness/react";

<Motioness
  template="stat-counter"
  config={{ stat1Value: 99, stat1Label: "Uptime %" }}
/>

<script src="https://cdn.motioness.com/player.js"></script>

<motioness-player
  template="step-sequence"
  step1Title="Install"
  step1Description="npm install motioness"
></motioness-player>

Customization

Every template accepts configuration and color overrides via URL params, React props, or HTML attributes.

<!-- iframe with config + colors -->
<iframe src="https://motioness.com/embed/feature-showcase?headline=Ship+Faster&primaryColor=%23ffffff&backgroundColor=%2309090b&accentColor=%23e05520" />

<!-- React with structured config -->
<Motioness
  template="feature-showcase"
  config={{
    headline: "Ship Faster",
    primaryColor: "#ffffff",
    backgroundColor: "#09090b",
    accentColor: "#e05520",
  }}
/>

Use the template detail page to visually customize any template and copy the ready-to-use embed code.

Theming

Templates accept three color props that control the visual appearance:

{
  "primaryColor": "#ffffff",    // Main text color
  "backgroundColor": "#09090b", // Canvas background
  "accentColor": "#e05520"      // Highlights, accents, decorative elements
}

6 built-in theme presets: minimal, bold, corporate, playful, dark-tech, warm. Apply them from the template detail page or import brand colors from any URL.

Duration Presets

All templates support 4 duration presets. Animations use proportional timing so they adapt to any length:

Projects & Branding

Organize compositions into projects. Each project stores brand config (colors, fonts, logo) auto-detected from your domain via Firecrawl.

• 01.Sign up and complete the onboarding wizard
• 02.Enter your domain — brand colors and fonts are detected automatically
• 03.Customize colors, fonts, and branding to match your site
• 04.All compositions you create are linked to your active project
• 05.Switch projects from the dashboard to filter compositions

AI Generation

Describe what you want in plain English and AI will generate a complete animation:

AI generates validated JSON config — never arbitrary code. Rate limits: 5 generations/month (free), 100/month (pro).

• 01.Enter a natural language prompt describing the desired content
• 02.AI selects the best template and generates the configuration
• 03.Optionally upload a reference image for vision-guided generation
• 04.Refine with follow-up prompts using AI Adjust on any template
• 05.Save and embed — the composition is ready to share

API Reference

The full REST API is documented as an OpenAPI 3.1 spec, auto-generated from Zod schemas:

Template List

All templates organized by category: