Animation Capture

# Motion Analysis: vmotif.com Hero

## Overview

The eight frames show the **above-the-fold hero** of vmotif.com. Across the sequence, almost everything is **static**. The hero image, headline, navigation, sound toggle and CTA do not change.

The only visible motion is the **feature ticker (marquee) along the bottom edge**. It scrolls continuously to the left. Every other keyframe in the capture belongs to sections further down the page, such as workflow graphs, loaders and feature orbits.

---

## 1. Animation Libraries Detected

| Technology | Status | Evidence |
|---|---|---|
| GSAP | Not detected | No `gsap` globals or inline transform tweens |
| Framer Motion | Not detected | No `data-projection-id` or motion-generated styles |
| Lottie | Not detected | No `lottie-player` or bodymovin JSON |
| **CSS `@keyframes`** | **Primary engine** | 28 named keyframes captured |
| **CSS transitions** | **Used for UI states** | `background` / `color` at `0.28s` |
| **CSS Houdini (`@property`)** | **Likely** | `feat-orbit` animates the custom property `--feat-angle` |
| Next.js / React | Framework only | `<!--$-->` Suspense markers; no motion library attached |

**Conclusion:** This is a pure CSS animation system. Vanilla JS probably only toggles classes, for example the sound toggle and IntersectionObserver-driven reveals.

---

## 2. CSS Keyframes & Transitions

### 2.1 Hero-relevant keyframes (visible in the frames)

The bottom ticker is driven by one of the two looping translate keyframes below.

```css
@keyframes ticker {
  to { transform: translate(-25%); }
}

@keyframes marquee {
  0%   { transform: translate(0); }
  100% { transform: translate(-50%); }
}
```

The `-25%` value implies the ticker track contains **4 identical copies** of the item list. The `-50%` marquee implies **2 copies** and is probably used by a logo or model strip elsewhere on the page.

### 2.2 Global UI transition

```css
transition:
  background 0.28s cubic-bezier(0.16, 1, 0.3, 1),
  color      0.28s cubic-bezier(0.16, 1, 0.3, 1);
```

This applies to the nav links, the **Sign in** button, the **Start building** button and the **Sound** pill.

### 2.3 Remaining keyframes (below-the-fold sections)

**Entrance / reveal**
- `fade-in-up`: `opacity 0 → 1`, `translateY(20px → 0)`
- `sg-land`: `opacity 0 → 1`, `translateY(6px → none)`
- `cd-spawn`: `opacity 0 → 1`, using the individual `transla…

import React, { useRef, useState } from 'react';
import {
  motion,
  useAnimationFrame,
  useMotionValue,
  useReducedMotion,
  useTransform,
} from 'framer-motion';
import './feature-ticker.css';

export interface TickerItem {
  /** Visible label, rendered uppercase with wide tracking */
  label: string;
  /** Optional glyph or icon node shown before the label */
  icon?: React.ReactNode;
}

export interface FeatureTickerProps {
  /** Items in one set. The set is rendered 4x so a -25% shift equals exactly one set width. */
  items?: TickerItem[];
  /** Seconds to scroll ONE full set. The analysis recommends 20s (~30-40 CSS px/s). */
  duration?: number;
  /** Scroll direction. The original moves left. */
  direction?: 'left' | 'right';
  /** Pause while hovered or focused */
  pauseOnHover?: boolean;
  /** Horizontal gap between items in px. The original spacing is about 75-85px. */
  gap?: number;
  /** Fade the left and right edges with a mask */
  fadeEdges?: boolean;
  /** Accessible label for the list */
  ariaLabel?: string;
  className?: string;
}

const DEFAULT_ITEMS: TickerItem[] = [
  { label: 'Dither', icon: '▸' },
  { label: 'Compose', icon: '▚' },
  { label: 'Dream', icon: '▦' },
  { label: 'Generate', icon: '☾' },
  { label: 'Remix', icon: '+' },
  { label: 'Upscale', icon: '⇄' },
  { label: 'Animate', icon: '◢' },
  { label: 'Direct', icon: '▶' },
];

/**
 * Exactly 4 copies of the set are rendered.
 * The track is width: max-content, so translating by -25% moves it exactly one set width.
 * Wrapping at that point produces a seamless loop, matching the original `ticker` keyframe:
 * `to { transform: translate(-25%) }`.
 */
const COPIES = 4;
const LOOP_PERCENT = 100 / COPIES; // 25

/** Wraps v into the range [min, max). */
const wrap = (min: number, max: number, v: number): number => {
  const range = max - min;
  return ((((v - min) % range) + range) % range) + min;
};

export const FeatureTicker: React.FC<FeatureTickerProps> = ({
  items = DEFAULT_ITEMS,
  duration = 20,
  direction = 'left',
  pauseOnHover = true,
  gap = 80,
  fadeEdges = false,
  ariaLabel = 'Product capabilities',
  className = '',
}) => {
  const prefersReducedMotion = useReducedMotion();
  const [paused, setPaused] = useState(false);
  const pausedRef = useRef(paused);
  pausedRef.current = paused;

  // The position is stored in percent of the track width, in the ra…

/* ==========================================================================
   vmotif-style Hero + Infinite Feature Ticker
   Pure CSS animation system (no JS motion required).

   Companion files (summarised here, since this deliverable is CSS only):

   1) React component (HeroTicker.tsx), Framer Motion version:
      - Props: items: {icon: string; label: string}[], duration?: number (default 20),
        copies?: number (default 4), pauseOnHover?: boolean, direction?: 'left' | 'right'.
      - Renders .ticker > motion.div.ticker__track containing `copies` repeated ul.ticker__set.
        Every set after the first gets aria-hidden.
      - animate={{ x: ['0%', `-${100 / copies}%`] }}
        transition={{ duration, ease: 'linear', repeat: Infinity }}.
        Linear easing matches the measured constant ~17-18px per frame.
        The travel of 100/copies percent equals one set width, so the loop is seamless.
      - Uses useReducedMotion() and skips `animate` when it returns true.
      - Can instead rely on the CSS below by setting the --ticker-duration and
        --ticker-copies custom properties inline.

   2) Recreation prompt:
      Build a static full-bleed hero with a dithered image inside a rounded frame
      (radius about 24px). Place notched corner cut-outs for the logo (top-left),
      the nav and CTA (top-right) and a Sound pill (bottom-left). Centre a serif
      headline, "What will you create?", with "create" in italic.
      The only motion is a bottom ticker that scrolls left continuously:
      linear easing, infinite, 20s per loop, starting on load, with no stagger.
      The track holds 4 identical copies of the item list and animates
      translateX from 0 to -25%. Items are DITHER, COMPOSE, DREAM, GENERATE,
      REMIX, UPSCALE, ANIMATE and DIRECT, each preceded by an icon glyph.
      Set them in an 11px monospace uppercase face with 0.3em letter-spacing
      and an ~80px gap. One set is about 653px wide.
      Hover states transition background and color over 0.28s with
      cubic-bezier(0.16, 1, 0.3, 1). Pause the ticker on hover, and stop it
      entirely under prefers-reduced-motion.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --c-bg: oklch(0.98 0.005 90);
  --c-surface: oklch(1 0 0);
  --c-ink: oklch(0.2 0.01 270);
  --c-i…

# vmotif.com Hero Ticker: Production Recreation

The analysis shows that the hero is **static** except for one element: a **linear, infinitely looping capability ticker** along the bottom edge. The deliverables below recreate that ticker and the site's global **0.28s expo-out** hover transition.

- **React component:** a Framer Motion ticker. It uses a frame-driven `x` motion value rather than a percentage keyframe, so speed stays in true **px/s** at any viewport width. It also supports an eased hover pause, pausing when off-screen, and reduced-motion handling.
- **CSS:** design tokens, a pure-CSS fallback using the original `ticker` keyframe (`translate(-25%)` with 4 copies), responsive scaling, and the UI transition.
- **Recreation prompt:** a self-contained brief for another agent.

---

## 1. React Component (TSX)

```tsx
'use client';

import {
  animate,
  motion,
  useAnimationFrame,
  useInView,
  useMotionValue,
  useReducedMotion,
} from 'framer-motion';
import {
  CSSProperties,
  ReactNode,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from 'react';
import './HeroTicker.css';

/* ------------------------------------------------------------------ */
/* Types                                                              */
/* ------------------------------------------------------------------ */

export interface TickerItem {
  /** Stable key. Falls back to the label. */
  id?: string;
  /** Uppercased visually via CSS; keep natural casing for screen readers. */
  label: string;
  /** Glyph or SVG shown before the label. */
  icon?: ReactNode;
}

export interface HeroTickerProps {
  /** Items in ONE set. The component duplicates them internally. */
  items?: TickerItem[];
  /**
   * Scroll speed in CSS px per second.
   * The measured original is ~18px per captured frame. A calm 30-40px/s
   * matches the "cinematic still" feel; ~88px/s matches a 100ms capture
   * interval literally.
   */
  speed?: number;
  /**
   * Seconds for one full set to pass. Overrides `speed` when provided.
   * 20s matches the recommended `ticker 20s linear infinite`.
   */
  duration?: number;
  /** Scroll direction. The original scrolls left. */
  direction?: 'left' | 'right';
  /**
   * Number of rendered copies. The original uses 4 (translate -25% = 1 set).
   * Needs enough copies to cover the viewport plus one set width.
   */
  copies?: number;
  /** Gap …