From 792726a0cdcdec00e1601b6af7c9dd5949716f52 Mon Sep 17 00:00:00 2001 From: Luke Nguyen Date: Tue, 24 Dec 2024 22:24:17 +0700 Subject: [PATCH] feat: add warp animation component (#307) * feat: add warp animation component * fix: added the warp grid lines * fix: update styles * fix: update mdx * fix: update code * fix: converted to tailwind * fix: converted more stuff to tailwind --------- Co-authored-by: Nguyen Phuc Loc Co-authored-by: Arghya Das Co-authored-by: Dillion Verma --- __registry__/index.tsx | 1042 +++++++++++------ config/docs.ts | 6 + .../components/warp-animation-container.mdx | 54 + public/r/index.json | 13 + .../default/warp-animation-container.json | 15 + .../example/warp-animation-container-demo.tsx | 26 + .../magicui/warp-animation-container.tsx | 152 +++ registry/registry-examples.ts | 6 + registry/registry-ui.ts | 6 + 9 files changed, 991 insertions(+), 329 deletions(-) create mode 100644 content/docs/components/warp-animation-container.mdx create mode 100644 public/r/styles/default/warp-animation-container.json create mode 100644 registry/default/example/warp-animation-container-demo.tsx create mode 100644 registry/default/magicui/warp-animation-container.tsx diff --git a/__registry__/index.tsx b/__registry__/index.tsx index 45138490d..3dffac71f 100644 --- a/__registry__/index.tsx +++ b/__registry__/index.tsx @@ -1,1727 +1,2111 @@ // @ts-nocheck // This file is autogenerated by scripts/build-registry.ts // Do not edit this file directly. -import * as React from "react" +import * as React from "react"; export const Index: Record = { - "default": { + default: { "magic-card": { name: "magic-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/magic-card.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/magic-card.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/magic-card.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "android": { + android: { name: "android", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/android.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/android.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/android.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], + }, + "warp-animation-container": { + name: "warp-animation-container", + type: "registry:ui", + registryDependencies: undefined, + files: ["registry/default/magicui/warp-animation-container.tsx"], + component: React.lazy( + () => import("@/registry/default/magicui/warp-animation-container.tsx"), + ), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [], }, "morphing-text": { name: "morphing-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/morphing-text.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/morphing-text.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/morphing-text.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "scroll-progress": { name: "scroll-progress", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/scroll-progress.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/scroll-progress.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/scroll-progress.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "neon-gradient-card": { name: "neon-gradient-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/neon-gradient-card.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/neon-gradient-card.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/neon-gradient-card.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "meteors": { + meteors: { name: "meteors", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/meteors.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/meteors.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/meteors.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "grid-pattern": { name: "grid-pattern", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/grid-pattern.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/grid-pattern.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/grid-pattern.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "dot-pattern": { name: "dot-pattern", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/dot-pattern.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/dot-pattern.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/dot-pattern.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "flickering-grid": { name: "flickering-grid", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/flickering-grid.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/flickering-grid.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/flickering-grid.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "hero-video-dialog": { name: "hero-video-dialog", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/hero-video-dialog.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/hero-video-dialog.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/hero-video-dialog.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "code-comparison": { name: "code-comparison", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/code-comparison.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/code-comparison.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/code-comparison.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "script-copy-btn": { name: "script-copy-btn", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/script-copy-btn.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/script-copy-btn.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/script-copy-btn.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "marquee": { + marquee: { name: "marquee", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/marquee.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/marquee.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/marquee.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "globe": { + globe: { name: "globe", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/globe.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/globe.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/globe.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "shimmer-button": { name: "shimmer-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/shimmer-button.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/shimmer-button.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/shimmer-button.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "tweet-card": { name: "tweet-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/tweet-card.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/tweet-card.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/tweet-card.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "client-tweet-card": { name: "client-tweet-card", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/client-tweet-card.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/client-tweet-card.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/client-tweet-card.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "bento-grid": { name: "bento-grid", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/bento-grid.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/bento-grid.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/bento-grid.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "particles": { + particles: { name: "particles", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/particles.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/particles.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/particles.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "number-ticker": { name: "number-ticker", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/number-ticker.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/number-ticker.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/number-ticker.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "ripple": { + ripple: { name: "ripple", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/ripple.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/ripple.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/ripple.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "retro-grid": { name: "retro-grid", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/retro-grid.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/retro-grid.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/retro-grid.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-list": { name: "animated-list", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-list.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/animated-list.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/animated-list.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-shiny-text": { name: "animated-shiny-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-shiny-text.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/animated-shiny-text.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/animated-shiny-text.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-grid-pattern": { name: "animated-grid-pattern", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-grid-pattern.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/animated-grid-pattern.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/animated-grid-pattern.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "border-beam": { name: "border-beam", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/border-beam.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/border-beam.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/border-beam.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-beam": { name: "animated-beam", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-beam.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/animated-beam.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/animated-beam.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "text-reveal": { name: "text-reveal", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/text-reveal.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/text-reveal.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/text-reveal.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "hyper-text": { name: "hyper-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/hyper-text.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/hyper-text.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/hyper-text.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-gradient-text": { name: "animated-gradient-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-gradient-text.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/animated-gradient-text.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/animated-gradient-text.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "orbiting-circles": { name: "orbiting-circles", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/orbiting-circles.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/orbiting-circles.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/orbiting-circles.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "dock": { + dock: { name: "dock", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/dock.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/dock.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/dock.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "word-rotate": { name: "word-rotate", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/word-rotate.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/word-rotate.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/word-rotate.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "avatar-circles": { name: "avatar-circles", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/avatar-circles.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/avatar-circles.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/avatar-circles.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "word-pull-up": { name: "word-pull-up", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/word-pull-up.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/word-pull-up.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/word-pull-up.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "typing-animation": { name: "typing-animation", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/typing-animation.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/typing-animation.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/typing-animation.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "blur-in": { name: "blur-in", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/blur-in.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/blur-in.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/blur-in.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "letter-pullup": { name: "letter-pullup", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/letter-pullup.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/letter-pullup.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/letter-pullup.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "sparkles-text": { name: "sparkles-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/sparkles-text.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/sparkles-text.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/sparkles-text.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "flip-text": { name: "flip-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/flip-text.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/flip-text.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/flip-text.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "icon-cloud": { name: "icon-cloud", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/icon-cloud.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/icon-cloud.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/icon-cloud.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "gradual-spacing": { name: "gradual-spacing", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/gradual-spacing.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/gradual-spacing.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/gradual-spacing.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "word-fade-in": { name: "word-fade-in", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/word-fade-in.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/word-fade-in.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/word-fade-in.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "scroll-based-velocity": { name: "scroll-based-velocity", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/scroll-based-velocity.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/scroll-based-velocity.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/scroll-based-velocity.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "scratch-to-reveal": { name: "scratch-to-reveal", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/scratch-to-reveal.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/scratch-to-reveal.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/scratch-to-reveal.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "fade-text": { name: "fade-text", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/fade-text.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/fade-text.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/fade-text.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "shiny-button": { name: "shiny-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/shiny-button.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/shiny-button.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/shiny-button.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "box-reveal": { name: "box-reveal", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/box-reveal.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/box-reveal.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/box-reveal.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "shine-border": { name: "shine-border", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/shine-border.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/shine-border.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/shine-border.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-circular-progress-bar": { name: "animated-circular-progress-bar", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-circular-progress-bar.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/animated-circular-progress-bar.tsx")), + component: React.lazy( + () => + import( + "@/registry/default/magicui/animated-circular-progress-bar.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "confetti": { + confetti: { name: "confetti", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/confetti.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/confetti.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/confetti.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-subscribe-button": { name: "animated-subscribe-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/animated-subscribe-button.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/animated-subscribe-button.tsx")), + component: React.lazy( + () => + import("@/registry/default/magicui/animated-subscribe-button.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "cool-mode": { name: "cool-mode", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/cool-mode.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/cool-mode.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/cool-mode.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "pulsating-button": { name: "pulsating-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/pulsating-button.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/pulsating-button.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/pulsating-button.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "ripple-button": { name: "ripple-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/ripple-button.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/ripple-button.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/ripple-button.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "file-tree": { name: "file-tree", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/file-tree.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/file-tree.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/file-tree.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "blur-fade": { name: "blur-fade", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/blur-fade.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/blur-fade.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/blur-fade.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "safari": { + safari: { name: "safari", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/safari.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/safari.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/safari.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "iphone-15-pro": { name: "iphone-15-pro", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/iphone-15-pro.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/iphone-15-pro.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/iphone-15-pro.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "rainbow-button": { name: "rainbow-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/rainbow-button.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/rainbow-button.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/rainbow-button.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "interactive-hover-button": { name: "interactive-hover-button", type: "registry:ui", registryDependencies: undefined, files: ["registry/default/magicui/interactive-hover-button.tsx"], - component: React.lazy(() => import("@/registry/default/magicui/interactive-hover-button.tsx")), + component: React.lazy( + () => import("@/registry/default/magicui/interactive-hover-button.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "magic-card-demo": { name: "magic-card-demo", type: "registry:example", registryDependencies: ["magic-card"], files: ["registry/default/example/magic-card-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/magic-card-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/magic-card-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "android-demo": { name: "android-demo", type: "registry:example", registryDependencies: ["android"], files: ["registry/default/example/android-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/android-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/android-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "android-demo-2": { name: "android-demo-2", type: "registry:example", registryDependencies: ["android"], files: ["registry/default/example/android-demo-2.tsx"], - component: React.lazy(() => import("@/registry/default/example/android-demo-2.tsx")), + component: React.lazy( + () => import("@/registry/default/example/android-demo-2.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "android-demo-3": { name: "android-demo-3", type: "registry:example", registryDependencies: ["android"], files: ["registry/default/example/android-demo-3.tsx"], - component: React.lazy(() => import("@/registry/default/example/android-demo-3.tsx")), + component: React.lazy( + () => import("@/registry/default/example/android-demo-3.tsx"), + ), + source: "", + category: "undefined", + subcategory: "undefined", + chunks: [], + }, + "warp-animation-container-demo": { + name: "warp-animation-container-demo", + type: "registry:example", + registryDependencies: ["warp-animation-container"], + files: ["registry/default/example/warp-animation-container-demo.tsx"], + component: React.lazy( + () => + import( + "@/registry/default/example/warp-animation-container-demo.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "morphing-text-demo": { name: "morphing-text-demo", type: "registry:example", registryDependencies: ["morphing-text"], files: ["registry/default/example/morphing-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/morphing-text-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/morphing-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "scroll-progress-demo": { name: "scroll-progress-demo", type: "registry:example", registryDependencies: ["scroll-progress"], files: ["registry/default/example/scroll-progress-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/scroll-progress-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/scroll-progress-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "neon-gradient-card-demo": { name: "neon-gradient-card-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/neon-gradient-card-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/neon-gradient-card-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/neon-gradient-card-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "meteors-demo": { name: "meteors-demo", type: "registry:example", registryDependencies: ["meteors"], files: ["registry/default/example/meteors-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/meteors-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/meteors-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "grid-pattern-demo": { name: "grid-pattern-demo", type: "registry:example", registryDependencies: ["grid-pattern"], files: ["registry/default/example/grid-pattern-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/grid-pattern-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/grid-pattern-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "grid-pattern-linear-gradient": { name: "grid-pattern-linear-gradient", type: "registry:example", registryDependencies: ["grid-pattern"], files: ["registry/default/example/grid-pattern-linear-gradient.tsx"], - component: React.lazy(() => import("@/registry/default/example/grid-pattern-linear-gradient.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/grid-pattern-linear-gradient.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "grid-pattern-dashed": { name: "grid-pattern-dashed", type: "registry:example", registryDependencies: ["grid-pattern"], files: ["registry/default/example/grid-pattern-dashed.tsx"], - component: React.lazy(() => import("@/registry/default/example/grid-pattern-dashed.tsx")), + component: React.lazy( + () => import("@/registry/default/example/grid-pattern-dashed.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "dot-pattern-demo": { name: "dot-pattern-demo", type: "registry:example", registryDependencies: ["dot-pattern"], files: ["registry/default/example/dot-pattern-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/dot-pattern-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/dot-pattern-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "dot-pattern-linear-gradient": { name: "dot-pattern-linear-gradient", type: "registry:example", registryDependencies: ["dot-pattern"], files: ["registry/default/example/dot-pattern-linear-gradient.tsx"], - component: React.lazy(() => import("@/registry/default/example/dot-pattern-linear-gradient.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/dot-pattern-linear-gradient.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "flickering-grid-demo": { name: "flickering-grid-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/flickering-grid-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/flickering-grid-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/flickering-grid-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "flickering-grid-rounded-demo": { name: "flickering-grid-rounded-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/flickering-grid-rounded-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/flickering-grid-rounded-demo.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/flickering-grid-rounded-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "hero-video-dialog-demo": { name: "hero-video-dialog-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/hero-video-dialog-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/hero-video-dialog-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/hero-video-dialog-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "hero-video-dialog-demo-top-in-bottom-out": { name: "hero-video-dialog-demo-top-in-bottom-out", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx"], - component: React.lazy(() => import("@/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx")), + files: [ + "registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx", + ], + component: React.lazy( + () => + import( + "@/registry/default/example/hero-video-dialog-demo-top-in-bottom-out.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "code-comparison-demo": { name: "code-comparison-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/code-comparison-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/code-comparison-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/code-comparison-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "script-copy-btn-demo": { name: "script-copy-btn-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/script-copy-btn-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/script-copy-btn-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/script-copy-btn-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "marquee-demo": { name: "marquee-demo", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/marquee-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/marquee-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "marquee-demo-vertical": { name: "marquee-demo-vertical", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-demo-vertical.tsx"], - component: React.lazy(() => import("@/registry/default/example/marquee-demo-vertical.tsx")), + component: React.lazy( + () => import("@/registry/default/example/marquee-demo-vertical.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "marquee-logos": { name: "marquee-logos", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-logos.tsx"], - component: React.lazy(() => import("@/registry/default/example/marquee-logos.tsx")), + component: React.lazy( + () => import("@/registry/default/example/marquee-logos.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "marquee-3d": { name: "marquee-3d", type: "registry:example", registryDependencies: ["marquee"], files: ["registry/default/example/marquee-3d.tsx"], - component: React.lazy(() => import("@/registry/default/example/marquee-3d.tsx")), + component: React.lazy( + () => import("@/registry/default/example/marquee-3d.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "globe-demo": { name: "globe-demo", type: "registry:example", registryDependencies: ["globe"], files: ["registry/default/example/globe-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/globe-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/globe-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "tweet-card-demo": { name: "tweet-card-demo", type: "registry:example", registryDependencies: ["tweet-card"], files: ["registry/default/example/tweet-card-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/tweet-card-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/tweet-card-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "tweet-card-images": { name: "tweet-card-images", type: "registry:example", registryDependencies: ["tweet-card"], files: ["registry/default/example/tweet-card-images.tsx"], - component: React.lazy(() => import("@/registry/default/example/tweet-card-images.tsx")), + component: React.lazy( + () => import("@/registry/default/example/tweet-card-images.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "tweet-card-meta-preview": { name: "tweet-card-meta-preview", type: "registry:example", registryDependencies: ["tweet-card"], files: ["registry/default/example/tweet-card-meta-preview.tsx"], - component: React.lazy(() => import("@/registry/default/example/tweet-card-meta-preview.tsx")), + component: React.lazy( + () => import("@/registry/default/example/tweet-card-meta-preview.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "shimmer-button-demo": { name: "shimmer-button-demo", type: "registry:example", registryDependencies: ["shimmer-button"], files: ["registry/default/example/shimmer-button-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/shimmer-button-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/shimmer-button-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "bento-demo": { name: "bento-demo", type: "registry:example", - registryDependencies: ["bento-grid","marquee","animated-list-demo","animated-beam-multiple-outputs","shadcn:command","shadcn:calendar"], + registryDependencies: [ + "bento-grid", + "marquee", + "animated-list-demo", + "animated-beam-multiple-outputs", + "shadcn:command", + "shadcn:calendar", + ], files: ["registry/default/example/bento-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/bento-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/bento-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "bento-demo-vertical": { name: "bento-demo-vertical", type: "registry:example", registryDependencies: ["bento-grid"], files: ["registry/default/example/bento-demo-vertical.tsx"], - component: React.lazy(() => import("@/registry/default/example/bento-demo-vertical.tsx")), + component: React.lazy( + () => import("@/registry/default/example/bento-demo-vertical.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "number-ticker-demo": { name: "number-ticker-demo", type: "registry:example", registryDependencies: ["number-ticker"], files: ["registry/default/example/number-ticker-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/number-ticker-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/number-ticker-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "number-ticker-decimal-demo": { name: "number-ticker-decimal-demo", type: "registry:example", registryDependencies: ["number-ticker"], files: ["registry/default/example/number-ticker-decimal-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/number-ticker-decimal-demo.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/number-ticker-decimal-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "ripple-demo": { name: "ripple-demo", type: "registry:example", registryDependencies: ["ripple"], files: ["registry/default/example/ripple-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/ripple-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/ripple-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "retro-grid-demo": { name: "retro-grid-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/retro-grid-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/retro-grid-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/retro-grid-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-list-demo": { name: "animated-list-demo", type: "registry:example", registryDependencies: ["animated-list"], files: ["registry/default/example/animated-list-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-list-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/animated-list-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-shiny-text-demo": { name: "animated-shiny-text-demo", type: "registry:example", registryDependencies: ["animated-shiny-text"], files: ["registry/default/example/animated-shiny-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-shiny-text-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/animated-shiny-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "particles-demo": { name: "particles-demo", type: "registry:example", registryDependencies: ["particles"], files: ["registry/default/example/particles-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/particles-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/particles-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-grid-pattern-demo": { name: "animated-grid-pattern-demo", type: "registry:example", registryDependencies: ["animated-grid-pattern"], files: ["registry/default/example/animated-grid-pattern-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-grid-pattern-demo.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/animated-grid-pattern-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "border-beam-demo": { name: "border-beam-demo", type: "registry:example", registryDependencies: ["border-beam"], files: ["registry/default/example/border-beam-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/border-beam-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/border-beam-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-beam-demo": { name: "animated-beam-demo", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-beam-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/animated-beam-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-beam-unidirectional": { name: "animated-beam-unidirectional", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-unidirectional.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-beam-unidirectional.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/animated-beam-unidirectional.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-beam-bidirectional": { name: "animated-beam-bidirectional", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-bidirectional.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-beam-bidirectional.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/animated-beam-bidirectional.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-beam-multiple-inputs": { name: "animated-beam-multiple-inputs", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-multiple-inputs.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-beam-multiple-inputs.tsx")), + component: React.lazy( + () => + import( + "@/registry/default/example/animated-beam-multiple-inputs.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-beam-multiple-outputs": { name: "animated-beam-multiple-outputs", type: "registry:example", registryDependencies: ["animated-beam"], files: ["registry/default/example/animated-beam-multiple-outputs.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-beam-multiple-outputs.tsx")), + component: React.lazy( + () => + import( + "@/registry/default/example/animated-beam-multiple-outputs.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "text-reveal-demo": { name: "text-reveal-demo", type: "registry:example", registryDependencies: ["text-reveal"], files: ["registry/default/example/text-reveal-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/text-reveal-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/text-reveal-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-gradient-text-demo": { name: "animated-gradient-text-demo", type: "registry:example", registryDependencies: ["animated-gradient-text"], files: ["registry/default/example/animated-gradient-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-gradient-text-demo.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/animated-gradient-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "orbiting-circles-demo": { name: "orbiting-circles-demo", type: "registry:example", registryDependencies: ["orbiting-circles"], files: ["registry/default/example/orbiting-circles-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/orbiting-circles-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/orbiting-circles-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "dock-demo": { name: "dock-demo", type: "registry:example", registryDependencies: ["dock"], files: ["registry/default/example/dock-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/dock-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/dock-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "dock-demo-2": { name: "dock-demo-2", type: "registry:example", registryDependencies: ["dock"], files: ["registry/default/example/dock-demo-2.tsx"], - component: React.lazy(() => import("@/registry/default/example/dock-demo-2.tsx")), + component: React.lazy( + () => import("@/registry/default/example/dock-demo-2.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "dock-demo-3": { name: "dock-demo-3", type: "registry:example", registryDependencies: ["dock"], files: ["registry/default/example/dock-demo-3.tsx"], - component: React.lazy(() => import("@/registry/default/example/dock-demo-3.tsx")), + component: React.lazy( + () => import("@/registry/default/example/dock-demo-3.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "word-rotate-demo": { name: "word-rotate-demo", type: "registry:example", registryDependencies: ["word-rotate"], files: ["registry/default/example/word-rotate-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/word-rotate-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/word-rotate-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "hyper-text-demo": { name: "hyper-text-demo", type: "registry:example", registryDependencies: ["hyper-text"], files: ["registry/default/example/hyper-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/hyper-text-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/hyper-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "avatar-circles-demo": { name: "avatar-circles-demo", type: "registry:example", registryDependencies: ["avatar-circles"], files: ["registry/default/example/avatar-circles-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/avatar-circles-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/avatar-circles-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "word-pull-up-demo": { name: "word-pull-up-demo", type: "registry:example", registryDependencies: ["word-pull-up"], files: ["registry/default/example/word-pull-up-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/word-pull-up-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/word-pull-up-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "typing-animation-demo": { name: "typing-animation-demo", type: "registry:example", registryDependencies: ["typing-animation"], files: ["registry/default/example/typing-animation-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/typing-animation-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/typing-animation-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "blur-in-demo": { name: "blur-in-demo", type: "registry:example", registryDependencies: ["blur-in"], files: ["registry/default/example/blur-in-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/blur-in-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/blur-in-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "scroll-based-velocity-demo": { name: "scroll-based-velocity-demo", type: "registry:example", registryDependencies: ["scroll-based-velocity"], files: ["registry/default/example/scroll-based-velocity-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/scroll-based-velocity-demo.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/scroll-based-velocity-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "scratch-to-reveal-demo": { name: "scratch-to-reveal-demo", type: "registry:example", registryDependencies: ["scratch-to-reveal"], files: ["registry/default/example/scratch-to-reveal-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/scratch-to-reveal-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/scratch-to-reveal-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "letter-pullup-demo": { name: "letter-pullup-demo", type: "registry:example", registryDependencies: ["letter-pullup"], files: ["registry/default/example/letter-pullup-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/letter-pullup-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/letter-pullup-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "flip-text-demo": { name: "flip-text-demo", type: "registry:example", registryDependencies: ["flip-text"], files: ["registry/default/example/flip-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/flip-text-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/flip-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "sparkles-text-demo": { name: "sparkles-text-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/sparkles-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/sparkles-text-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/sparkles-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "icon-cloud-demo": { name: "icon-cloud-demo", type: "registry:example", registryDependencies: ["icon-cloud"], files: ["registry/default/example/icon-cloud-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/icon-cloud-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/icon-cloud-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "icon-cloud-demo-2": { name: "icon-cloud-demo-2", type: "registry:example", registryDependencies: ["icon-cloud"], files: ["registry/default/example/icon-cloud-demo-2.tsx"], - component: React.lazy(() => import("@/registry/default/example/icon-cloud-demo-2.tsx")), + component: React.lazy( + () => import("@/registry/default/example/icon-cloud-demo-2.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "gradual-spacing-demo": { name: "gradual-spacing-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/gradual-spacing-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/gradual-spacing-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/gradual-spacing-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "word-fade-in-demo": { name: "word-fade-in-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/word-fade-in-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/word-fade-in-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/word-fade-in-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "fade-text-demo": { name: "fade-text-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/fade-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/fade-text-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/fade-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "shiny-button-demo": { name: "shiny-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/shiny-button-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/shiny-button-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/shiny-button-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "box-reveal-demo": { name: "box-reveal-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/box-reveal-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/box-reveal-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/box-reveal-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-circular-progress-bar-demo": { name: "animated-circular-progress-bar-demo", type: "registry:example", registryDependencies: undefined, - files: ["registry/default/example/animated-circular-progress-bar-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-circular-progress-bar-demo.tsx")), + files: [ + "registry/default/example/animated-circular-progress-bar-demo.tsx", + ], + component: React.lazy( + () => + import( + "@/registry/default/example/animated-circular-progress-bar-demo.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "shine-border-demo": { name: "shine-border-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/shine-border-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/shine-border-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/shine-border-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "shine-border-demo-2": { name: "shine-border-demo-2", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/shine-border-demo-2.tsx"], - component: React.lazy(() => import("@/registry/default/example/shine-border-demo-2.tsx")), + component: React.lazy( + () => import("@/registry/default/example/shine-border-demo-2.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-demo": { name: "confetti-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/confetti-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-basic-cannon": { name: "confetti-basic-cannon", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-basic-cannon.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-basic-cannon.tsx")), + component: React.lazy( + () => import("@/registry/default/example/confetti-basic-cannon.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-random-direction": { name: "confetti-random-direction", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-random-direction.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-random-direction.tsx")), + component: React.lazy( + () => + import("@/registry/default/example/confetti-random-direction.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-fireworks": { name: "confetti-fireworks", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-fireworks.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-fireworks.tsx")), + component: React.lazy( + () => import("@/registry/default/example/confetti-fireworks.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-stars": { name: "confetti-stars", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-stars.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-stars.tsx")), + component: React.lazy( + () => import("@/registry/default/example/confetti-stars.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-side-cannons": { name: "confetti-side-cannons", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-side-cannons.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-side-cannons.tsx")), + component: React.lazy( + () => import("@/registry/default/example/confetti-side-cannons.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-custom-shapes": { name: "confetti-custom-shapes", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-custom-shapes.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-custom-shapes.tsx")), + component: React.lazy( + () => import("@/registry/default/example/confetti-custom-shapes.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "confetti-emoji": { name: "confetti-emoji", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/confetti-emoji.tsx"], - component: React.lazy(() => import("@/registry/default/example/confetti-emoji.tsx")), + component: React.lazy( + () => import("@/registry/default/example/confetti-emoji.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "animated-subscribe-button-demo": { name: "animated-subscribe-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/animated-subscribe-button-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/animated-subscribe-button-demo.tsx")), + component: React.lazy( + () => + import( + "@/registry/default/example/animated-subscribe-button-demo.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "cool-mode-demo": { name: "cool-mode-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/cool-mode-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/cool-mode-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/cool-mode-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "cool-mode-custom": { name: "cool-mode-custom", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/cool-mode-custom.tsx"], - component: React.lazy(() => import("@/registry/default/example/cool-mode-custom.tsx")), + component: React.lazy( + () => import("@/registry/default/example/cool-mode-custom.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "pulsating-button-demo": { name: "pulsating-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/pulsating-button-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/pulsating-button-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/pulsating-button-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "ripple-button-demo": { name: "ripple-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/ripple-button-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/ripple-button-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/ripple-button-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "file-tree-demo": { name: "file-tree-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/file-tree-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/file-tree-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/file-tree-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "blur-fade-demo": { name: "blur-fade-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/blur-fade-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/blur-fade-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/blur-fade-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "blur-fade-text-demo": { name: "blur-fade-text-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/blur-fade-text-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/blur-fade-text-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/blur-fade-text-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "safari-demo": { name: "safari-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/safari-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/safari-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/safari-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "safari-demo-2": { name: "safari-demo-2", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/safari-demo-2.tsx"], - component: React.lazy(() => import("@/registry/default/example/safari-demo-2.tsx")), + component: React.lazy( + () => import("@/registry/default/example/safari-demo-2.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "safari-demo-3": { name: "safari-demo-3", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/safari-demo-3.tsx"], - component: React.lazy(() => import("@/registry/default/example/safari-demo-3.tsx")), + component: React.lazy( + () => import("@/registry/default/example/safari-demo-3.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "iphone-15-pro-demo": { name: "iphone-15-pro-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/iphone-15-pro-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/iphone-15-pro-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/iphone-15-pro-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "iphone-15-pro-demo-2": { name: "iphone-15-pro-demo-2", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/iphone-15-pro-demo-2.tsx"], - component: React.lazy(() => import("@/registry/default/example/iphone-15-pro-demo-2.tsx")), + component: React.lazy( + () => import("@/registry/default/example/iphone-15-pro-demo-2.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "iphone-15-pro-demo-3": { name: "iphone-15-pro-demo-3", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/iphone-15-pro-demo-3.tsx"], - component: React.lazy(() => import("@/registry/default/example/iphone-15-pro-demo-3.tsx")), + component: React.lazy( + () => import("@/registry/default/example/iphone-15-pro-demo-3.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "rainbow-button-demo": { name: "rainbow-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/rainbow-button-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/rainbow-button-demo.tsx")), + component: React.lazy( + () => import("@/registry/default/example/rainbow-button-demo.tsx"), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, "interactive-hover-button-demo": { name: "interactive-hover-button-demo", type: "registry:example", registryDependencies: undefined, files: ["registry/default/example/interactive-hover-button-demo.tsx"], - component: React.lazy(() => import("@/registry/default/example/interactive-hover-button-demo.tsx")), + component: React.lazy( + () => + import( + "@/registry/default/example/interactive-hover-button-demo.tsx" + ), + ), source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, - "utils": { + utils: { name: "utils", type: "registry:lib", registryDependencies: undefined, @@ -1730,7 +2114,7 @@ export const Index: Record = { source: "", category: "undefined", subcategory: "undefined", - chunks: [] + chunks: [], }, }, -} +}; diff --git a/config/docs.ts b/config/docs.ts index cccd73748..47302d49b 100644 --- a/config/docs.ts +++ b/config/docs.ts @@ -308,6 +308,12 @@ export const docsConfig: DocsConfig = { items: [], label: "", }, + { + title: "Warp Animation Container", + href: `/docs/components/warp-animation-container`, + items: [], + label: "New", + }, ], }, { diff --git a/content/docs/components/warp-animation-container.mdx b/content/docs/components/warp-animation-container.mdx new file mode 100644 index 000000000..ff0bebd05 --- /dev/null +++ b/content/docs/components/warp-animation-container.mdx @@ -0,0 +1,54 @@ +--- +title: Warp Animation Container +date: 2024-12-24 +description: A container component that applies a warp animation effect to its children +author: magicui +published: true +--- + + + +## Installation + + + + + CLI + Manual + + + +```bash +npx shadcn@latest add "https://magicui.design/r/warp-animation-container" +``` + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Props + +| Prop | Type | Description | Default | +| ------------ | --------------- | ----------------------------------------------- | -------------------- | +| children | React.ReactNode | The content to be put inside the warp animation | - | +| perspective | number | The perspective of the warp animation | 100 | +| beamsPerSide | number | The number of beams per side | 3 | +| beamSize | number | The size of the beams | 5 | +| beamDelayMax | number | The maximum delay of the beams | 3 | +| beamDelayMin | number | The minimum delay of the beams | 0 | +| beamDuration | number | The duration of the beams | 3 | +| gridColor | string | The color of the grid lines | "hsl(var(--border))" | diff --git a/public/r/index.json b/public/r/index.json index bab13d397..fe610e8d9 100644 --- a/public/r/index.json +++ b/public/r/index.json @@ -22,6 +22,19 @@ } ] }, + { + "name": "warp-animation-container", + "type": "registry:ui", + "dependencies": [ + "framer-motion" + ], + "files": [ + { + "path": "magicui/warp-animation-container.tsx", + "type": "registry:ui" + } + ] + }, { "name": "morphing-text", "type": "registry:ui", diff --git a/public/r/styles/default/warp-animation-container.json b/public/r/styles/default/warp-animation-container.json new file mode 100644 index 000000000..4cbc958b7 --- /dev/null +++ b/public/r/styles/default/warp-animation-container.json @@ -0,0 +1,15 @@ +{ + "name": "warp-animation-container", + "type": "registry:ui", + "dependencies": [ + "framer-motion" + ], + "files": [ + { + "path": "magicui/warp-animation-container.tsx", + "content": "import { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport React, { HTMLAttributes, useCallback, useMemo } from \"react\";\n\ninterface WarpAnimationContainerProps extends HTMLAttributes {\n children: React.ReactNode;\n perspective?: number;\n beamsPerSide?: number;\n beamSize?: number;\n beamDelayMax?: number;\n beamDelayMin?: number;\n beamDuration?: number;\n gridColor?: string;\n}\n\nconst Beam = ({\n width,\n x,\n delay,\n duration,\n}: {\n width: string | number;\n x: string | number;\n delay: number;\n duration: number;\n}) => {\n const hue = Math.floor(Math.random() * 360);\n const ar = Math.floor(Math.random() * 10) + 1;\n\n return (\n \n );\n};\n\nconst WarpAnimationContainer: React.FC = ({\n children,\n perspective = 100,\n className,\n beamsPerSide = 3,\n beamSize = 5,\n beamDelayMax = 3,\n beamDelayMin = 0,\n beamDuration = 3,\n gridColor = \"hsl(var(--border))\",\n ...props\n}) => {\n const generateBeams = useCallback(() => {\n const beams = [];\n const cellsPerSide = Math.floor(100 / beamSize);\n const step = cellsPerSide / beamsPerSide;\n\n for (let i = 0; i < beamsPerSide; i++) {\n const x = Math.floor(i * step);\n const delay =\n Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin;\n beams.push({ x, delay });\n }\n return beams;\n }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin]);\n\n const topBeams = useMemo(() => generateBeams(), [generateBeams]);\n const rightBeams = useMemo(() => generateBeams(), [generateBeams]);\n const bottomBeams = useMemo(() => generateBeams(), [generateBeams]);\n const leftBeams = useMemo(() => generateBeams(), [generateBeams]);\n\n return (\n
\n \n \n {topBeams.map((beam, index) => (\n \n ))}\n
\n \n {bottomBeams.map((beam, index) => (\n \n ))}\n \n \n {leftBeams.map((beam, index) => (\n \n ))}\n \n \n {rightBeams.map((beam, index) => (\n \n ))}\n \n \n
{children}
\n \n );\n};\n\nexport default WarpAnimationContainer;\n", + "type": "registry:ui", + "target": "" + } + ] +} \ No newline at end of file diff --git a/registry/default/example/warp-animation-container-demo.tsx b/registry/default/example/warp-animation-container-demo.tsx new file mode 100644 index 000000000..ff59ab873 --- /dev/null +++ b/registry/default/example/warp-animation-container-demo.tsx @@ -0,0 +1,26 @@ +import { + Card, + CardContent, + CardDescription, + CardTitle, +} from "@/components/ui/card"; +import WarpAnimationContainer from "@/components/magicui/warp-animation-container"; + +export default function ExampleComponentDemo() { + return ( +
+ + + + Congratulations on Your Promotion! + + Your hard work and dedication have paid off. We're thrilled + to see you take this next step in your career. Keep up the + fantastic work! + + + + +
+ ); +} diff --git a/registry/default/magicui/warp-animation-container.tsx b/registry/default/magicui/warp-animation-container.tsx new file mode 100644 index 000000000..65b718d11 --- /dev/null +++ b/registry/default/magicui/warp-animation-container.tsx @@ -0,0 +1,152 @@ +import { cn } from "@/lib/utils"; +import { motion } from "framer-motion"; +import React, { HTMLAttributes, useCallback, useMemo } from "react"; + +interface WarpAnimationContainerProps extends HTMLAttributes { + children: React.ReactNode; + perspective?: number; + beamsPerSide?: number; + beamSize?: number; + beamDelayMax?: number; + beamDelayMin?: number; + beamDuration?: number; + gridColor?: string; +} + +const Beam = ({ + width, + x, + delay, + duration, +}: { + width: string | number; + x: string | number; + delay: number; + duration: number; +}) => { + const hue = Math.floor(Math.random() * 360); + const ar = Math.floor(Math.random() * 10) + 1; + + return ( + + ); +}; + +const WarpAnimationContainer: React.FC = ({ + children, + perspective = 100, + className, + beamsPerSide = 3, + beamSize = 5, + beamDelayMax = 3, + beamDelayMin = 0, + beamDuration = 3, + gridColor = "hsl(var(--border))", + ...props +}) => { + const generateBeams = useCallback(() => { + const beams = []; + const cellsPerSide = Math.floor(100 / beamSize); + const step = cellsPerSide / beamsPerSide; + + for (let i = 0; i < beamsPerSide; i++) { + const x = Math.floor(i * step); + const delay = + Math.random() * (beamDelayMax - beamDelayMin) + beamDelayMin; + beams.push({ x, delay }); + } + return beams; + }, [beamsPerSide, beamSize, beamDelayMax, beamDelayMin]); + + const topBeams = useMemo(() => generateBeams(), [generateBeams]); + const rightBeams = useMemo(() => generateBeams(), [generateBeams]); + const bottomBeams = useMemo(() => generateBeams(), [generateBeams]); + const leftBeams = useMemo(() => generateBeams(), [generateBeams]); + + return ( +
+
+ {/* top side */} +
+ {topBeams.map((beam, index) => ( + + ))} +
+ {/* bottom side */} +
+ {bottomBeams.map((beam, index) => ( + + ))} +
+ {/* left side */} +
+ {leftBeams.map((beam, index) => ( + + ))} +
+ {/* right side */} +
+ {rightBeams.map((beam, index) => ( + + ))} +
+
+
{children}
+
+ ); +}; + +export default WarpAnimationContainer; diff --git a/registry/registry-examples.ts b/registry/registry-examples.ts index ad02fc67d..d8e7825e2 100644 --- a/registry/registry-examples.ts +++ b/registry/registry-examples.ts @@ -25,6 +25,12 @@ export const examples: Registry = [ registryDependencies: ["android"], files: ["example/android-demo-3.tsx"], }, + { + name: "warp-animation-container-demo", + type: "registry:example", + registryDependencies: ["warp-animation-container"], + files: ["example/warp-animation-container-demo.tsx"], + }, { name: "morphing-text-demo", type: "registry:example", diff --git a/registry/registry-ui.ts b/registry/registry-ui.ts index 2058894eb..74733d96b 100644 --- a/registry/registry-ui.ts +++ b/registry/registry-ui.ts @@ -12,6 +12,12 @@ export const ui: Registry = [ type: "registry:ui", files: ["magicui/android.tsx"], }, + { + name: "warp-animation-container", + type: "registry:ui", + dependencies: ["framer-motion"], + files: ["magicui/warp-animation-container.tsx"], + }, { name: "morphing-text", type: "registry:ui",