valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add CSS Animation Editor tool

Browse Source 
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:
Sebastian Krüger
2026-02-28 14:17:04 +01:00
parent 4a0aa85859
commit eeef3283c8
14 changed files with 1524 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/AppIcons.tsx
View File

@@ -37,6 +37,24 @@ export const FaviconIcon = (props: React.SVGProps<SVGSVGElement>) => (
</svg>
);
export const AnimateIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="3" strokeWidth={2} />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M12 3c-1.2 2.4-1.2 4.8 0 7.2" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M12 21c1.2-2.4 1.2-4.8 0-7.2" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M3 12c2.4 1.2 4.8 1.2 7.2 0" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
d="M21 12c-2.4-1.2-4.8-1.2-7.2 0" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} strokeDasharray="2 2"
d="M5.6 5.6c1.8 1.8 3.4 2.6 4.8 2.4" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} strokeDasharray="2 2"
d="M18.4 18.4c-1.8-1.8-3.4-2.6-4.8-2.4" />
</svg>
);
export const QRCodeIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<rect x="3" y="3" width="7" height="7" rx="1" strokeWidth={2} />