feat: add CSS Animation Editor tool
Comprehensive visual editor for CSS @keyframe animations: - AnimationSettings: name, duration, delay, easing (incl. cubic-bezier), iteration, direction, fill-mode - KeyframeTimeline: drag-to-reposition keyframe markers, click-track to add, delete selected - KeyframeProperties: per-keyframe transform (translate/rotate/scale/skew), opacity, background-color, border-radius, blur, brightness via sliders - AnimationPreview: live preview on box/circle/text element with play/pause/restart and speed control (0.25×–2×) - PresetLibrary: 22 presets across Entrance/Exit/Attention/Special categories with animated thumbnails - ExportPanel: plain CSS and Tailwind v4 @utility formats with copy and download Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
166
components/animate/AnimationPreview.tsx
Normal file
166
components/animate/AnimationPreview.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
||||
import { Play, Pause, RotateCcw, Square, Circle, Type } from 'lucide-react';
|
||||
import { buildCSS } from '@/lib/animate/cssBuilder';
|
||||
import type { AnimationConfig, PreviewElement } from '@/types/animate';
|
||||
|
||||
interface Props {
|
||||
config: AnimationConfig;
|
||||
element: PreviewElement;
|
||||
onElementChange: (e: PreviewElement) => void;
|
||||
}
|
||||
|
||||
const SPEEDS: { label: string; value: string }[] = [
|
||||
{ label: '0.25×', value: '0.25' },
|
||||
{ label: '0.5×', value: '0.5' },
|
||||
{ label: '1×', value: '1' },
|
||||
{ label: '2×', value: '2' },
|
||||
];
|
||||
|
||||
export function AnimationPreview({ config, element, onElementChange }: Props) {
|
||||
const styleRef = useRef<HTMLStyleElement | null>(null);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
const [restartKey, setRestartKey] = useState(0);
|
||||
const [paused, setPaused] = useState(false);
|
||||
const [speed, setSpeed] = useState('1');
|
||||
|
||||
// Inject @keyframes CSS into document head
|
||||
useEffect(() => {
|
||||
if (!styleRef.current) {
|
||||
styleRef.current = document.createElement('style');
|
||||
styleRef.current.id = 'kit-animate-preview';
|
||||
document.head.appendChild(styleRef.current);
|
||||
}
|
||||
styleRef.current.textContent = buildCSS(config);
|
||||
}, [config]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
styleRef.current?.remove();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const restart = () => {
|
||||
setPaused(false);
|
||||
setRestartKey((k) => k + 1);
|
||||
};
|
||||
|
||||
const scaledDuration = Math.round(config.duration / Number(speed));
|
||||
|
||||
return (
|
||||
<Card className="h-full flex flex-col">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0">
|
||||
<CardTitle>Preview</CardTitle>
|
||||
<Select value={speed} onValueChange={setSpeed}>
|
||||
<SelectTrigger className="w-20 text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SPEEDS.map((s) => (
|
||||
<SelectItem key={s.value} value={s.value} className="text-xs">
|
||||
{s.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 flex flex-col gap-4">
|
||||
{/* Preview canvas */}
|
||||
<div className="flex-1 min-h-52 flex items-center justify-center rounded-xl bg-gradient-to-br from-muted/20 to-muted/5 border border-border relative overflow-hidden">
|
||||
{/* Grid overlay */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-5 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px)',
|
||||
backgroundSize: '32px 32px',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Animated element */}
|
||||
<div
|
||||
key={restartKey}
|
||||
ref={elementRef}
|
||||
className="animated relative z-10"
|
||||
style={{
|
||||
animationDuration: `${scaledDuration}ms`,
|
||||
animationPlayState: paused ? 'paused' : 'running',
|
||||
}}
|
||||
>
|
||||
{element === 'box' && (
|
||||
<div className="w-20 h-20 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 shadow-lg shadow-purple-500/30" />
|
||||
)}
|
||||
{element === 'circle' && (
|
||||
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-cyan-400 to-violet-500 shadow-lg shadow-cyan-500/30" />
|
||||
)}
|
||||
{element === 'text' && (
|
||||
<span className="text-4xl font-bold bg-gradient-to-r from-violet-400 via-pink-400 to-cyan-400 bg-clip-text text-transparent select-none">
|
||||
Hello
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
value={element}
|
||||
onValueChange={(v) => v && onElementChange(v as PreviewElement)}
|
||||
className="gap-1"
|
||||
>
|
||||
<ToggleGroupItem value="box" size="sm" title="Box">
|
||||
<Square className="h-3.5 w-3.5" />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="circle" size="sm" title="Circle">
|
||||
<Circle className="h-3.5 w-3.5" />
|
||||
</ToggleGroupItem>
|
||||
<ToggleGroupItem value="text" size="sm" title="Text">
|
||||
<Type className="h-3.5 w-3.5" />
|
||||
</ToggleGroupItem>
|
||||
</ToggleGroup>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="outline"
|
||||
onClick={() => { setPaused(false); }}
|
||||
disabled={!paused}
|
||||
title="Play"
|
||||
>
|
||||
<Play className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="outline"
|
||||
onClick={() => setPaused(true)}
|
||||
disabled={paused}
|
||||
title="Pause"
|
||||
>
|
||||
<Pause className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="outline"
|
||||
onClick={restart}
|
||||
title="Restart"
|
||||
>
|
||||
<RotateCcw className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user