How to Configure the MOTION_INTENSITY Dial in Taste Skill

Configure the MOTION_INTENSITY dial by setting a value between 1 and 10 in the SKILL.md front-matter, where values above 3 require prefers-reduced-motion guards and values above 4 mandate at least one real animation implementation.

The MOTION_INTENSITY dial in the Leonxlnx/taste-skill repository controls the depth of animation in generated frontend code, ranging from static hover states to cinematic physics-based interactions. When you configure this dial, you determine whether the skill emits simple CSS transitions or complex GSAP ScrollTrigger choreography based on the configuration in skills/taste-skill/SKILL.md. Understanding these settings ensures your generated components match both your design vision and accessibility requirements.

Understanding the MOTION_INTENSITY Dial Architecture

The Taste Skill uses three core dials defined in the skill's front-matter to drive design decisions. The MOTION_INTENSITY dial specifically controls animation depth on a scale of 1 to 10:

• 1-3: Static layouts with only hover and active CSS states
• 4-7: Fluid CSS transitions and simple scroll-reveal animations
• 8-10: Advanced choreography with GSAP ScrollTrigger, magnetic micro-physics, and perpetual micro-interactions

According to the source code in skills/taste-skill/SKILL.md, the default baseline is set to 6 (as part of the 8/6/4 variance/intensity/density baseline). Any value greater than 3 must honor the prefers-reduced-motion media query, and values greater than 4 trigger the "motion claimed, motion shown" rule requiring at least one actual animation implementation.

Configuring the Dial in SKILL.md

The dial lives in the YAML front-matter of the skill definition file. Unlike runtime configuration files, the agent reads this value at generation time to determine which code snippets to emit.

# https://github.com/Leonxlnx/taste-skill/blob/main/skills/taste-skill/SKILL.md

---
name: design-taste-frontend
description: Anti-slop frontend skill …
---
...
* **`DESIGN_VARIANCE: 8`** - 1 = Perfect Symmetry, 10 = Artsy Chaos  
* **`MOTION_INTENSITY: 6`** - 1 = Static, 10 = Cinematic / Physics  
* **`VISUAL_DENSITY: 4`** - 1 = Art Gallery / Airy, 10 = Cockpit / Packed Data

You can override these defaults directly in your prompt; the agent treats prompt overrides as authoritative values. For a low-motion landing page, set the value to 2 or 3 to restrict output to static components with hover states only.

Implementing Motion by Intensity Level

The engine interprets the dial value to determine which animation patterns are allowed in the generated code.

Level 1-3: Static and Hover States

At intensity levels 1 through 3, the skill generates only CSS :hover and :active states. No scroll-triggered or continuous animations are permitted, making this ideal for accessibility-first or minimalist designs.

Level 4-7: Fluid CSS Transitions

Mid-range values enable fluid CSS transitions and simple scroll-reveal animations using CSS transition properties. When you configure MOTION_INTENSITY in this range, expect code emitting transition: all 0.3s ease-out patterns and Intersection Observer-based reveal effects.

Level 8-10: Advanced Choreography

High-intensity configurations trigger the emission of GSAP-based scroll-driven timelines and magnetic hover effects. The skill injects components using gsap/ScrollTrigger and motion/react for physics-based interactions, but only when the dial exceeds 5 for magnetic effects or 8 for scroll choreography.

Accessibility Guardrails for MOTION_INTENSITY

Any configuration above 3 requires implementation of reduced-motion support. The generated code must check prefers-reduced-motion before executing animations.

// src/components/Hero.tsx
"use client";

import { motion, useReducedMotion } from "motion/react";

export function Hero() {
  const reduce = useReducedMotion();          // respects prefers-reduced-motion
  const shouldAnimate = !reduce && process.env.MOTION_INTENSITY > 3;

  return (
    <section className="hero min-h-[100dvh] flex items-center justify-center">
      {shouldAnimate ? (
        <motion.h1
          initial={{ opacity: 0, y: -30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          className="text-5xl font-bold"
        >
          Welcome to Your Brand
        </motion.h1>
      ) : (
        <h1 className="text-5xl font-bold">Welcome to Your Brand</h1>
      )}
    </section>
  );
}

The useReducedMotion hook from motion/react provides the accessibility check, while process.env.MOTION_INTENSITY represents the injected dial value from the skill generator.

Advanced Implementation Examples

Magnetic Micro-physics (MOTION_INTENSITY > 5)

When the dial exceeds 5, the skill emits magnetic button components using useMotionValue and useTransform from Motion:

// src/components/MagneticButton.tsx
"use client";

import { motion, useMotionValue, useTransform } from "motion/react";

export function MagneticButton({ children }: { children: React.ReactNode }) {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const rotateX = useTransform(mouseY, [0, 200], [15, -15]);
  const rotateY = useTransform(mouseX, [0, 200], [-15, 15]);

  return (
    <motion.button
      className="px-6 py-3 bg-primary text-white rounded"
      style={{ rotateX, rotateY }}
      onMouseMove={(e) => {
        mouseX.set(e.clientX);
        mouseY.set(e.clientY);
      }}
      onMouseLeave={() => {
        mouseX.set(0);
        mouseY.set(0);
      }}
    >
      {children}
    </motion.button>
  );
}

Scroll-Driven GSAP Animation (MOTION_INTENSITY ≥ 8)

For cinematic intensity levels (8-10), the skill generates ScrollTrigger components:

// src/components/StickyStack.tsx
"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useReducedMotion } from "motion/react";

gsap.registerPlugin(ScrollTrigger);

export function StickyStack({ cards }: { cards: React.ReactNode[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  useEffect(() => {
    if (reduce || !ref.current) return;
    const ctx = gsap.context(() => {
      const cardEls = gsap.utils.toArray<HTMLElement>(".stack-card");
      cardEls.forEach((card, i) => {
        if (i === cardEls.length - 1) return;
        ScrollTrigger.create({
          trigger: card,
          start: "top top",
          pin: true,
          pinSpacing: false,
        });
        gsap.to(card, {
          scale: 0.92,
          opacity: 0.55,
          scrollTrigger: {
            trigger: cardEls[i + 1],
            start: "top bottom",
            end: "top top",
            scrub: true,
          },
        });
      });
    }, ref);
    return () => ctx.revert();
  }, [reduce]);

  return (
    <div ref={ref} className="relative">
      {cards.map((c, i) => (
        <div
          key={i}
          className="stack-card min-h-[100dvh] flex items-center justify-center"
        >
          {c}
        </div>
      ))}
    </div>
  );
}

This implementation registers the ScrollTrigger plugin and creates pinned scroll animations with scrubbed transitions, but only renders when useReducedMotion returns false.

Key Configuration Files

Understanding the file structure helps when manually adjusting or debugging the dial behavior:

• skills/taste-skill/SKILL.md: Contains the dial definitions, default values (8/6/4), and motion-related generation rules.
• skills/taste-skill/README.md: Provides human-readable summaries of dial semantics in the Settings section.
• src/components/*: Generated output location where the skill injects conditional components based on the current MOTION_INTENSITY value.

Summary

• Configure MOTION_INTENSITY in skills/taste-skill/SKILL.md front-matter using values 1-10, or override via prompt.
• Levels 1-3 restrict output to static CSS hover states; 4-7 enable fluid transitions; 8-10 activate GSAP and magnetic physics.
• Always wrap animations in useReducedMotion() checks when the dial exceeds 3 to maintain accessibility compliance.
• Values above 4 require at least one implemented animation (entry transition, scroll-reveal, or hover physics) to satisfy the "motion claimed, motion shown" rule.
• The skill injects process.env.MOTION_INTENSITY at generation time to conditionally render appropriate motion components.

Frequently Asked Questions

What happens if I set MOTION_INTENSITY to 10 but don't have scroll animations?

If you configure the dial above 4 but fail to implement actual animations, you violate the "motion claimed, motion shown" rule enforced by the taste-skill validator. Lower the dial to 3 or below if your design cannot support motion, or ensure at least one animation (such as a hero entry transition or hover effect) is present.

How does Taste Skill handle reduced motion preferences?

According to the source implementation in skills/taste-skill/SKILL.md, any MOTION_INTENSITY value greater than 3 must include prefers-reduced-motion detection. The generated code uses the useReducedMotion hook from motion/react to disable animations automatically for users who have requested reduced motion in their system settings.

Can I override the MOTION_INTENSITY default without editing SKILL.md?

Yes. While the default value of 6 is defined in skills/taste-skill/SKILL.md, you can override it directly in your prompt to the agent. The skill generator treats prompt overrides as authoritative and injects the overridden value into process.env.MOTION_INTENSITY during code generation.

What is the performance impact of magnetic micro-physics?

Magnetic effects (emitted when MOTION_INTENSITY > 5) use useMotionValue and useTransform from Motion to track mouse position without triggering React re-renders. This approach maintains 60fps performance by manipulating transform properties directly via the Motion library's optimized animation loop.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}