The Motion Compiler: Compiling Visual Interactions to High-Performance Code

// Compiler Output: React JSX Component
import React, { useState } from 'react';
import { useSpring } from '@exodeui/react';

export function CompiledCard({ title, subtitle }) {
  const [active, setActive] = useState(false);
  const spring = useSpring({
    scale: active ? 0.96 : 1.0,
    stiffness: 420,
    damping: 26
  });

  return (
    <div 
      onPointerDown={() => setActive(true)}
      onPointerUp={() => setActive(false)}
      style={spring}
      className="p-6 rounded-2xl bg-zinc-900 border border-zinc-800 text-white cursor-pointer"
    >
      <h3 className="font-bold text-lg">{title}</h3>
      <p className="text-zinc-400 text-sm mt-1">{subtitle}</p>
    </div>
  );
}