mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
228 lines
6.6 KiB
TypeScript
228 lines
6.6 KiB
TypeScript
/**
|
|
* Hanzo UI - Animation Components Registry
|
|
*
|
|
* Animation components using Framer Motion for rich interactions.
|
|
* These are Hanzo-exclusive extensions for engaging user experiences.
|
|
*/
|
|
|
|
import { type Registry, type RegistryItem } from "../schema"
|
|
|
|
const animation: RegistryItem[] = [
|
|
{
|
|
name: "animated-background",
|
|
type: "registry:animation",
|
|
title: "Animated Background",
|
|
description: "Animated background patterns and effects",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/animated-background.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "backgrounds",
|
|
},
|
|
{
|
|
name: "animated-cursor",
|
|
type: "registry:animation",
|
|
title: "Animated Cursor",
|
|
description: "Custom animated cursor that follows mouse movement",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/animated-cursor.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "cursor",
|
|
},
|
|
{
|
|
name: "animated-icon",
|
|
type: "registry:animation",
|
|
title: "Animated Icon",
|
|
description: "Icons with transition and interaction animations",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/animated-icon.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "icons",
|
|
},
|
|
{
|
|
name: "animated-list",
|
|
type: "registry:animation",
|
|
title: "Animated List",
|
|
description: "List with staggered entrance animations",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/animated-list.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "lists",
|
|
},
|
|
{
|
|
name: "animated-number",
|
|
type: "registry:animation",
|
|
title: "Animated Number",
|
|
description: "Number counter with smooth animation",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/animated-number.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "text",
|
|
},
|
|
{
|
|
name: "animated-text",
|
|
type: "registry:animation",
|
|
title: "Animated Text",
|
|
description: "Text with reveal and transition animations",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/animated-text.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "text",
|
|
},
|
|
{
|
|
name: "apple-cards-carousel",
|
|
type: "registry:animation",
|
|
title: "Apple Cards Carousel",
|
|
description: "Apple-style cards carousel with parallax",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{
|
|
path: "animation/apple-cards-carousel.tsx",
|
|
type: "registry:animation",
|
|
},
|
|
],
|
|
category: "animation",
|
|
subcategory: "carousel",
|
|
},
|
|
{
|
|
name: "grid-pattern",
|
|
type: "registry:animation",
|
|
title: "Grid Pattern",
|
|
description: "Animated grid background pattern",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [{ path: "animation/grid-pattern.tsx", type: "registry:animation" }],
|
|
category: "animation",
|
|
subcategory: "backgrounds",
|
|
},
|
|
{
|
|
name: "particles-background",
|
|
type: "registry:animation",
|
|
title: "Particles Background",
|
|
description: "Particle effects background with configurable behavior",
|
|
dependencies: ["@hanzo/ui", "tsparticles", "@tsparticles/react"],
|
|
files: [
|
|
{
|
|
path: "animation/particles-background.tsx",
|
|
type: "registry:animation",
|
|
},
|
|
],
|
|
category: "animation",
|
|
subcategory: "backgrounds",
|
|
},
|
|
{
|
|
name: "pulse-animation",
|
|
type: "registry:animation",
|
|
title: "Pulse Animation",
|
|
description: "Pulsing animation effects for attention",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/pulse-animation.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "effects",
|
|
},
|
|
{
|
|
name: "reveal-animation",
|
|
type: "registry:animation",
|
|
title: "Reveal Animation",
|
|
description: "Element reveal animations on scroll",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/reveal-animation.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "scroll",
|
|
},
|
|
{
|
|
name: "timeline",
|
|
type: "registry:animation",
|
|
title: "Timeline",
|
|
description: "Animated timeline with scroll-based progression",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [{ path: "animation/timeline.tsx", type: "registry:animation" }],
|
|
category: "animation",
|
|
subcategory: "scroll",
|
|
},
|
|
{
|
|
name: "animated-beam",
|
|
type: "registry:animation",
|
|
title: "Animated Beam",
|
|
description: "Animated beam connection effect between elements",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/animated-beam.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "effects",
|
|
},
|
|
{
|
|
name: "magnetic",
|
|
type: "registry:animation",
|
|
title: "Magnetic",
|
|
description: "Magnetic hover effect that attracts elements to cursor",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [{ path: "animation/magnetic.tsx", type: "registry:animation" }],
|
|
category: "animation",
|
|
subcategory: "effects",
|
|
},
|
|
{
|
|
name: "motion-highlight",
|
|
type: "registry:animation",
|
|
title: "Motion Highlight",
|
|
description: "Motion-based text and element highlighting",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [
|
|
{ path: "animation/motion-highlight.tsx", type: "registry:animation" },
|
|
],
|
|
category: "animation",
|
|
subcategory: "effects",
|
|
},
|
|
{
|
|
name: "marquee",
|
|
type: "registry:animation",
|
|
title: "Marquee",
|
|
description: "Scrolling marquee text with configurable speed",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [{ path: "animation/marquee.tsx", type: "registry:animation" }],
|
|
category: "animation",
|
|
subcategory: "text",
|
|
},
|
|
{
|
|
name: "flip-text",
|
|
type: "registry:animation",
|
|
title: "Flip Text",
|
|
description: "Text with flip animation on change",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [{ path: "animation/flip-text.tsx", type: "registry:animation" }],
|
|
category: "animation",
|
|
subcategory: "text",
|
|
},
|
|
{
|
|
name: "typewriter",
|
|
type: "registry:animation",
|
|
title: "Typewriter",
|
|
description: "Typewriter text effect with cursor",
|
|
dependencies: ["@hanzo/ui", "motion"],
|
|
files: [{ path: "animation/typewriter.tsx", type: "registry:animation" }],
|
|
category: "animation",
|
|
subcategory: "text",
|
|
},
|
|
]
|
|
|
|
export const hanzoAnimationRegistry: Registry = {
|
|
name: "hanzo/ui/animation",
|
|
homepage: "https://ui.hanzo.ai/animation",
|
|
items: animation,
|
|
}
|