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:
16
app/(app)/animate/page.tsx
Normal file
16
app/(app)/animate/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { Metadata } from 'next';
|
||||
import { AnimationEditor } from '@/components/animate/AnimationEditor';
|
||||
import { AppPage } from '@/components/layout/AppPage';
|
||||
import { getToolByHref } from '@/lib/tools';
|
||||
|
||||
const tool = getToolByHref('/animate')!;
|
||||
|
||||
export const metadata: Metadata = { title: tool.title, description: tool.summary };
|
||||
|
||||
export default function AnimatePage() {
|
||||
return (
|
||||
<AppPage title={tool.title} description={tool.summary} icon={tool.icon}>
|
||||
<AnimationEditor />
|
||||
</AppPage>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user