Sebastian Krüger
eeef3283c8
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>
48 lines
910 B
TypeScript
48 lines
910 B
TypeScript
import type { AnimationConfig, Keyframe, TransformValue } from '@/types/animate';
|
|
|
|
export const DEFAULT_TRANSFORM: TransformValue = {
|
|
translateX: 0,
|
|
translateY: 0,
|
|
rotate: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
skewX: 0,
|
|
skewY: 0,
|
|
};
|
|
|
|
export function newKeyframe(offset: number): Keyframe {
|
|
return {
|
|
id: crypto.randomUUID(),
|
|
offset,
|
|
properties: {},
|
|
};
|
|
}
|
|
|
|
export const DEFAULT_CONFIG: AnimationConfig = {
|
|
name: 'fadeInUp',
|
|
duration: 600,
|
|
delay: 0,
|
|
easing: 'ease-out',
|
|
iterationCount: 1,
|
|
direction: 'normal',
|
|
fillMode: 'forwards',
|
|
keyframes: [
|
|
{
|
|
id: crypto.randomUUID(),
|
|
offset: 0,
|
|
properties: {
|
|
opacity: 0,
|
|
transform: { ...DEFAULT_TRANSFORM, translateY: 20 },
|
|
},
|
|
},
|
|
{
|
|
id: crypto.randomUUID(),
|
|
offset: 100,
|
|
properties: {
|
|
opacity: 1,
|
|
transform: { ...DEFAULT_TRANSFORM },
|
|
},
|
|
},
|
|
],
|
|
};
|