From def80b2816105794d467d7155baa5981a59f61f4 Mon Sep 17 00:00:00 2001 From: Riddhiman007 <91105040+Ridhiman007@users.noreply.github.com> Date: Thu, 6 Mar 2025 09:41:16 +0530 Subject: [PATCH 1/2] default --- .eslintrc.json | 8 + .gitignore | 40 + .vercelignore | 1 + CONTRIBUTING.md | 78 + LICENCE.md | 22 + README.md | 21 + app/docs/accordion/accordion-basic.tsx | 69 + app/docs/accordion/accordion-icons.tsx | 85 + app/docs/accordion/accordion-variant.tsx | 98 + app/docs/accordion/page.mdx | 109 + .../animated-card-background-hover.tsx | 63 + .../animated-tabs-hover.tsx | 31 + .../animated-background/animated-tabs.tsx | 50 + app/docs/animated-background/page.mdx | 87 + .../animated-background/segmented-control.tsx | 30 + .../animated-group-custom-variants-2.tsx | 63 + .../animated-group-custom-variants.tsx | 54 + .../animated-group/animated-group-preset.tsx | 31 + app/docs/animated-group/page.mdx | 87 + .../animated-number/animated-number-basic.tsx | 33 + .../animated-number-counter.tsx | 33 + .../animated-number-in-view.tsx | 27 + app/docs/animated-number/page.mdx | 80 + app/docs/border-trail/border-trail-card-1.tsx | 26 + app/docs/border-trail/border-trail-card-2.tsx | 49 + .../border-trail/border-trail-textarea.tsx | 13 + app/docs/border-trail/page.mdx | 79 + app/docs/carousel/carousel-basic.tsx | 40 + .../carousel/carousel-custom-indicator.tsx | 46 + app/docs/carousel/carousel-custom-sizes.tsx | 53 + app/docs/carousel/carousel-spacing.tsx | 57 + app/docs/carousel/page.mdx | 136 + app/docs/cursor/cursor-1.tsx | 70 + app/docs/cursor/cursor-2.tsx | 65 + app/docs/cursor/cursor-3.tsx | 34 + app/docs/cursor/page.mdx | 80 + app/docs/dialog/dialog-basic.tsx | 47 + app/docs/dialog/dialog-controlled.tsx | 52 + app/docs/dialog/dialog-custom-backdrop.tsx | 47 + app/docs/dialog/dialog-custom-exit.tsx | 72 + .../dialog-custom-variants-transtion.tsx | 67 + app/docs/dialog/page.mdx | 149 + app/docs/disclosure/disclosure-basic.tsx | 30 + app/docs/disclosure/disclosure-card.tsx | 81 + app/docs/disclosure/page.mdx | 92 + app/docs/dock/apple-style-dock.tsx | 81 + app/docs/dock/page.mdx | 91 + app/docs/glow-effect/glow-effect-button.tsx | 19 + .../glow-effect-card-background.tsx | 32 + .../glow-effect/glow-effect-card-mode.tsx | 50 + app/docs/glow-effect/page.mdx | 85 + .../image-comparison-basic.tsx | 23 + .../image-comparison-custom-slider.tsx | 25 + .../image-comparison-hover.tsx | 26 + .../image-comparison-spring.tsx | 29 + app/docs/image-comparison/page.mdx | 105 + app/docs/in-view/in-view-basic-multiple.tsx | 85 + app/docs/in-view/in-view-basic.tsx | 31 + app/docs/in-view/in-view-images-grid.tsx | 63 + app/docs/in-view/page.mdx | 89 + .../infinite-slider/infinite-slider-basic.tsx | 38 + .../infinite-slider-hover-speed.tsx | 38 + .../infinite-slider-vertical.tsx | 72 + app/docs/infinite-slider/page.mdx | 82 + app/docs/installation/page.mdx | 44 + app/docs/layout.tsx | 153 + app/docs/magnetic/magnetic-basic.tsx | 14 + app/docs/magnetic/magnetic-nested.tsx | 28 + app/docs/magnetic/page.mdx | 74 + .../morphing-dialog-basic-1.tsx | 104 + .../morphing-dialog-basic-2.tsx | 109 + .../morphing-dialog/morphing-dialog-image.tsx | 50 + app/docs/morphing-dialog/page.mdx | 136 + .../morphing-popover-basic.tsx | 77 + ...ing-popover-custom-transition-variants.tsx | 88 + .../morphing-popover-textarea.tsx | 87 + app/docs/morphing-popover/page.mdx | 99 + app/docs/navigation.ts | 196 + app/docs/page.mdx | 23 + app/docs/progressive-blur/page.mdx | 81 + .../progressive-blur-basic.tsx | 24 + .../progressive-blur-hover.tsx | 47 + .../progressive-blur-slider.tsx | 48 + app/docs/scroll-progress/page.mdx | 82 + .../scroll-progress-basic-1.tsx | 35 + .../scroll-progress-basic-2.tsx | 50 + .../scroll-progress-basic-3.tsx | 40 + app/docs/sliding-number/clock.tsx | 28 + app/docs/sliding-number/page.mdx | 82 + app/docs/sliding-number/sliding-basic.tsx | 35 + app/docs/sliding-number/sliding-slider.tsx | 26 + app/docs/spinning-text/page.mdx | 90 + .../spinning-text/spinning-text-basic.tsx | 13 + .../spinning-text-custom-transition.tsx | 18 + .../spinning-text-custom-variants.tsx | 42 + app/docs/spotlight/page.mdx | 88 + app/docs/spotlight/spotlight-basic.tsx | 35 + app/docs/spotlight/spotlight-border.tsx | 13 + app/docs/spotlight/spotlight-custom-color.tsx | 42 + app/docs/text-effect/page.mdx | 140 + .../text-effect/text-effect-custom-delay.tsx | 53 + app/docs/text-effect/text-effect-exit.tsx | 61 + app/docs/text-effect/text-effect-line.tsx | 37 + app/docs/text-effect/text-effect-per-char.tsx | 9 + app/docs/text-effect/text-effect-per-word.tsx | 9 + app/docs/text-effect/text-effect-preset.tsx | 9 + app/docs/text-effect/text-effect-speed.tsx | 9 + app/docs/text-effect/text-effect-variants.tsx | 52 + app/docs/text-loop/page.mdx | 88 + app/docs/text-loop/text-loop-basic.tsx | 12 + .../text-loop-custom-variants-transition.tsx | 43 + app/docs/text-loop/text-loop-on-index.tsx | 50 + app/docs/text-morph/page.mdx | 77 + app/docs/text-morph/text-morph-button.tsx | 16 + app/docs/text-morph/text-morph-input.tsx | 22 + app/docs/text-roll/page.mdx | 90 + app/docs/text-roll/text-roll-basic.tsx | 9 + .../text-roll-custom-transition-delay.tsx | 28 + .../text-roll/text-roll-custom-variants.tsx | 21 + app/docs/text-scramble/page.mdx | 88 + .../text-scramble/text-scramble-basic.tsx | 9 + .../text-scramble-custom-char-duration.tsx | 13 + .../text-scramble-custom-trigger.tsx | 25 + app/docs/text-shimmer-wave/page.mdx | 73 + .../text-shimmer-wave-basic.tsx | 9 + .../text-shimmer-wave-color.tsx | 16 + app/docs/text-shimmer/page.mdx | 78 + app/docs/text-shimmer/text-shimmer-basic.tsx | 9 + app/docs/text-shimmer/text-shimmer-color.tsx | 12 + app/docs/tilt/page.mdx | 79 + app/docs/tilt/tilt-card-1.tsx | 26 + app/docs/tilt/tilt-spotlight.tsx | 44 + app/docs/toolbar-dynamic/page.mdx | 21 + app/docs/toolbar-expandable/page.mdx | 22 + app/docs/transition-panel/page.mdx | 74 + .../transition-panel-card.tsx | 145 + .../transition-panel-tabs.tsx | 68 + app/globals.css | 179 + app/icon.ico | Bin 0 -> 7170 bytes app/layout.tsx | 44 + app/opengraph-image.alt | 1 + app/opengraph-image.jpg | Bin 0 -> 35379 bytes app/page.tsx | 229 + app/showcase/page.tsx | 63 + app/twitter-image.alt | 1 + app/twitter-image.jpg | Bin 0 -> 35379 bytes bun.lockb | Bin 0 -> 284872 bytes cli/.gitignore | 2 + cli/README.md | 75 + cli/package-lock.json | 699 ++ cli/package.json | 39 + cli/src/index.ts | 258 + cli/tsconfig.json | 13 + components.json | 21 + components/core/accordion.tsx | 197 + components/core/animated-background.tsx | 90 + components/core/animated-group.tsx | 142 + components/core/animated-number.tsx | 35 + components/core/border-trail.tsx | 43 + components/core/carousel.tsx | 351 + components/core/cursor.tsx | 134 + components/core/dialog.tsx | 335 + components/core/disclosure.tsx | 191 + components/core/dock.tsx | 224 + components/core/glow-effect.tsx | 151 + components/core/image-comparison.tsx | 147 + components/core/in-view.tsx | 50 + components/core/infinite-slider.tsx | 112 + components/core/magnetic.tsx | 112 + components/core/morphing-dialog.tsx | 423 + components/core/morphing-popover.tsx | 224 + components/core/progressive-blur.tsx | 62 + components/core/scroll-progress.tsx | 42 + components/core/sliding-number.tsx | 122 + components/core/spinning-text.tsx | 104 + components/core/spotlight.tsx | 85 + components/core/text-effect.tsx | 291 + components/core/text-loop.tsx | 72 + components/core/text-morph.tsx | 73 + components/core/text-roll.tsx | 102 + components/core/text-scramble.tsx | 85 + components/core/text-shimmer-wave.tsx | 89 + components/core/text-shimmer.tsx | 55 + components/core/tilt.tsx | 92 + components/core/toolbar-dynamic.tsx | 90 + components/core/toolbar-expandable.tsx | 186 + components/core/transition-panel.tsx | 48 + components/ui/button.tsx | 58 + components/ui/input.tsx | 22 + components/ui/label.tsx | 26 + components/ui/tooltip.tsx | 61 + components/website/card-example-landing.tsx | 46 + components/website/code-block.tsx | 33 + components/website/code-preview.tsx | 50 + components/website/code-renderer.tsx | 19 + components/website/component-code-preview.tsx | 51 + components/website/component-preview.tsx | 62 + components/website/dropdown-menu.tsx | 198 + components/website/header.tsx | 86 + components/website/icons/github.tsx | 13 + .../website/icons/motion-primitives-logo.tsx | 26 + components/website/icons/shadcn-logo.tsx | 39 + components/website/icons/x.tsx | 13 + components/website/installation-cli.tsx | 122 + components/website/launch-banner.tsx | 14 + components/website/open-in-v0.tsx | 38 + components/website/scroll-area.tsx | 46 + components/website/table-of-contents.tsx | 79 + components/website/tabs.tsx | 115 + components/website/theme-provider.tsx | 9 + components/website/theme-switch.tsx | 44 + hooks/useClickOutside.tsx | 26 + hooks/usePreventScroll.tsx | 362 + lib/browser.ts | 38 + lib/code.ts | 7 + lib/custom-theme.ts | 9 + lib/shiki.ts | 20 + lib/theme-css-variables.ts | 276 + lib/utils.ts | 6 + mdx-components.tsx | 141 + next.config.mjs | 18 + package-lock.json | 9558 +++++++++++++++++ package.json | 55 + postcss.config.mjs | 8 + prettier.config.js | 9 + public/apple_music_logo.svg | 11 + public/c/accordion.json | 21 + public/c/animated-background.json | 21 + public/c/animated-group.json | 21 + public/c/animated-number.json | 21 + public/c/border-trail.json | 21 + public/c/carousel.json | 21 + public/c/cursor.json | 21 + public/c/dialog.json | 26 + public/c/disclosure.json | 21 + public/c/dock.json | 21 + public/c/glow-effect.json | 21 + public/c/image-comparison.json | 21 + public/c/in-view.json | 21 + public/c/infinite-slider.json | 21 + public/c/magnetic.json | 21 + public/c/morphing-dialog.json | 26 + public/c/morphing-popover.json | 26 + public/c/progressive-blur.json | 21 + public/c/registry.json | 555 + public/c/scroll-progress.json | 21 + public/c/sliding-number.json | 21 + public/c/spinning-text.json | 21 + public/c/spotlight.json | 21 + public/c/text-effect.json | 21 + public/c/text-loop.json | 21 + public/c/text-morph.json | 21 + public/c/text-roll.json | 21 + public/c/text-scramble.json | 21 + public/c/text-shimmer-wave.json | 21 + public/c/text-shimmer.json | 21 + public/c/tilt.json | 21 + public/c/toolbar-dynamic.json | 26 + public/c/toolbar-expandable.json | 26 + public/c/transition-panel.json | 21 + public/chrome_logo.svg | 47 + public/e/accordion-basic.json | 18 + public/e/accordion-icons.json | 18 + public/e/accordion-variant.json | 18 + public/e/animated-card-background-hover.json | 18 + .../e/animated-group-custom-variants-2.json | 18 + public/e/animated-group-custom-variants.json | 18 + public/e/animated-group-preset.json | 18 + public/e/animated-number-basic.json | 18 + public/e/animated-number-counter.json | 18 + public/e/animated-number-in-view.json | 18 + public/e/animated-tabs-hover.json | 18 + public/e/animated-tabs.json | 18 + public/e/apple-style-dock.json | 18 + public/e/border-trail-card-1.json | 18 + public/e/border-trail-card-2.json | 18 + public/e/border-trail-textarea.json | 18 + public/e/carousel-basic.json | 18 + public/e/carousel-custom-indicator.json | 18 + public/e/carousel-custom-sizes.json | 18 + public/e/carousel-spacing.json | 18 + public/e/clock.json | 18 + public/e/cursor-1.json | 18 + public/e/cursor-2.json | 18 + public/e/cursor-3.json | 18 + public/e/dialog-basic.json | 23 + public/e/dialog-controlled.json | 23 + public/e/dialog-custom-backdrop.json | 23 + public/e/dialog-custom-exit.json | 23 + .../e/dialog-custom-variants-transtion.json | 23 + public/e/disclosure-basic.json | 18 + public/e/disclosure-card.json | 18 + public/e/glow-effect-button.json | 13 + public/e/glow-effect-card-background.json | 18 + public/e/glow-effect-card-mode.json | 23 + public/e/image-comparison-basic.json | 18 + public/e/image-comparison-custom-slider.json | 18 + public/e/image-comparison-hover.json | 18 + public/e/image-comparison-spring.json | 18 + public/e/in-view-basic-multiple.json | 18 + public/e/in-view-basic.json | 18 + public/e/in-view-images-grid.json | 18 + public/e/infinite-slider-basic.json | 18 + public/e/infinite-slider-hover-speed.json | 18 + public/e/infinite-slider-vertical.json | 18 + public/e/magnetic-basic.json | 18 + public/e/magnetic-nested.json | 18 + public/e/morphing-dialog-basic-1.json | 23 + public/e/morphing-dialog-basic-2.json | 23 + public/e/morphing-dialog-image.json | 23 + public/e/morphing-popover-basic.json | 23 + ...ng-popover-custom-transition-variants.json | 23 + public/e/morphing-popover-textarea.json | 23 + public/e/progressive-blur-basic.json | 18 + public/e/progressive-blur-hover.json | 18 + public/e/progressive-blur-slider.json | 18 + public/e/scroll-progress-basic-1.json | 18 + public/e/scroll-progress-basic-2.json | 18 + public/e/scroll-progress-basic-3.json | 18 + public/e/segmented-control.json | 18 + public/e/sliding-basic.json | 18 + public/e/sliding-slider.json | 18 + public/e/spinning-text-basic.json | 18 + public/e/spinning-text-custom-transition.json | 18 + public/e/spinning-text-custom-variants.json | 18 + public/e/spotlight-basic.json | 18 + public/e/spotlight-border.json | 18 + public/e/spotlight-custom-color.json | 18 + public/e/text-effect-custom-delay.json | 18 + public/e/text-effect-exit.json | 18 + public/e/text-effect-line.json | 18 + public/e/text-effect-per-char.json | 18 + public/e/text-effect-per-word.json | 18 + public/e/text-effect-preset.json | 18 + public/e/text-effect-speed.json | 18 + public/e/text-effect-variants.json | 18 + public/e/text-loop-basic.json | 18 + .../text-loop-custom-variants-transition.json | 18 + public/e/text-loop-on-index.json | 18 + public/e/text-morph-button.json | 18 + public/e/text-morph-input.json | 18 + public/e/text-roll-basic.json | 18 + .../e/text-roll-custom-transition-delay.json | 18 + public/e/text-roll-custom-variants.json | 18 + public/e/text-scramble-basic.json | 18 + .../e/text-scramble-custom-char-duration.json | 18 + public/e/text-scramble-custom-trigger.json | 18 + public/e/text-shimmer-basic.json | 18 + public/e/text-shimmer-color.json | 18 + public/e/text-shimmer-wave-basic.json | 18 + public/e/text-shimmer-wave-color.json | 18 + public/e/tilt-card-1.json | 18 + public/e/tilt-spotlight.json | 23 + public/e/transition-panel-card.json | 18 + public/e/transition-panel-tabs.json | 18 + public/eb-27-lamp-edouard-wilfrid-buquet.jpg | Bin 0 -> 35667 bytes public/gucci_logo.svg | 7 + public/h/useClickOutside.json | 11 + public/h/usePreventScroll.json | 11 + public/jquery_logo.svg | 12 + public/mp_dark.png | Bin 0 -> 84305 bytes public/mp_light.png | Bin 0 -> 80325 bytes public/national_geographic_logo.svg | 8 + public/nintendo_logo.svg | 10 + public/prada_logo.svg | 7 + public/sony_logo.svg | 8 + public/strava_logo.svg | 4 + scripts/registry-build.ts | 194 + scripts/registry-components.ts | 320 + scripts/registry-examples.ts | 1521 +++ scripts/registry-hooks.ts | 12 + scripts/registry-schema.ts | 36 + tsconfig.json | 26 + 373 files changed, 30752 insertions(+) create mode 100644 .eslintrc.json create mode 100644 .gitignore create mode 100644 .vercelignore create mode 100644 CONTRIBUTING.md create mode 100644 LICENCE.md create mode 100644 README.md create mode 100644 app/docs/accordion/accordion-basic.tsx create mode 100644 app/docs/accordion/accordion-icons.tsx create mode 100644 app/docs/accordion/accordion-variant.tsx create mode 100644 app/docs/accordion/page.mdx create mode 100644 app/docs/animated-background/animated-card-background-hover.tsx create mode 100644 app/docs/animated-background/animated-tabs-hover.tsx create mode 100644 app/docs/animated-background/animated-tabs.tsx create mode 100644 app/docs/animated-background/page.mdx create mode 100644 app/docs/animated-background/segmented-control.tsx create mode 100644 app/docs/animated-group/animated-group-custom-variants-2.tsx create mode 100644 app/docs/animated-group/animated-group-custom-variants.tsx create mode 100644 app/docs/animated-group/animated-group-preset.tsx create mode 100644 app/docs/animated-group/page.mdx create mode 100644 app/docs/animated-number/animated-number-basic.tsx create mode 100644 app/docs/animated-number/animated-number-counter.tsx create mode 100644 app/docs/animated-number/animated-number-in-view.tsx create mode 100644 app/docs/animated-number/page.mdx create mode 100644 app/docs/border-trail/border-trail-card-1.tsx create mode 100644 app/docs/border-trail/border-trail-card-2.tsx create mode 100644 app/docs/border-trail/border-trail-textarea.tsx create mode 100644 app/docs/border-trail/page.mdx create mode 100644 app/docs/carousel/carousel-basic.tsx create mode 100644 app/docs/carousel/carousel-custom-indicator.tsx create mode 100644 app/docs/carousel/carousel-custom-sizes.tsx create mode 100644 app/docs/carousel/carousel-spacing.tsx create mode 100644 app/docs/carousel/page.mdx create mode 100644 app/docs/cursor/cursor-1.tsx create mode 100644 app/docs/cursor/cursor-2.tsx create mode 100644 app/docs/cursor/cursor-3.tsx create mode 100644 app/docs/cursor/page.mdx create mode 100644 app/docs/dialog/dialog-basic.tsx create mode 100644 app/docs/dialog/dialog-controlled.tsx create mode 100644 app/docs/dialog/dialog-custom-backdrop.tsx create mode 100644 app/docs/dialog/dialog-custom-exit.tsx create mode 100644 app/docs/dialog/dialog-custom-variants-transtion.tsx create mode 100644 app/docs/dialog/page.mdx create mode 100644 app/docs/disclosure/disclosure-basic.tsx create mode 100644 app/docs/disclosure/disclosure-card.tsx create mode 100644 app/docs/disclosure/page.mdx create mode 100644 app/docs/dock/apple-style-dock.tsx create mode 100644 app/docs/dock/page.mdx create mode 100644 app/docs/glow-effect/glow-effect-button.tsx create mode 100644 app/docs/glow-effect/glow-effect-card-background.tsx create mode 100644 app/docs/glow-effect/glow-effect-card-mode.tsx create mode 100644 app/docs/glow-effect/page.mdx create mode 100644 app/docs/image-comparison/image-comparison-basic.tsx create mode 100644 app/docs/image-comparison/image-comparison-custom-slider.tsx create mode 100644 app/docs/image-comparison/image-comparison-hover.tsx create mode 100644 app/docs/image-comparison/image-comparison-spring.tsx create mode 100644 app/docs/image-comparison/page.mdx create mode 100644 app/docs/in-view/in-view-basic-multiple.tsx create mode 100644 app/docs/in-view/in-view-basic.tsx create mode 100644 app/docs/in-view/in-view-images-grid.tsx create mode 100644 app/docs/in-view/page.mdx create mode 100644 app/docs/infinite-slider/infinite-slider-basic.tsx create mode 100644 app/docs/infinite-slider/infinite-slider-hover-speed.tsx create mode 100644 app/docs/infinite-slider/infinite-slider-vertical.tsx create mode 100644 app/docs/infinite-slider/page.mdx create mode 100644 app/docs/installation/page.mdx create mode 100644 app/docs/layout.tsx create mode 100644 app/docs/magnetic/magnetic-basic.tsx create mode 100644 app/docs/magnetic/magnetic-nested.tsx create mode 100644 app/docs/magnetic/page.mdx create mode 100644 app/docs/morphing-dialog/morphing-dialog-basic-1.tsx create mode 100644 app/docs/morphing-dialog/morphing-dialog-basic-2.tsx create mode 100644 app/docs/morphing-dialog/morphing-dialog-image.tsx create mode 100644 app/docs/morphing-dialog/page.mdx create mode 100644 app/docs/morphing-popover/morphing-popover-basic.tsx create mode 100644 app/docs/morphing-popover/morphing-popover-custom-transition-variants.tsx create mode 100644 app/docs/morphing-popover/morphing-popover-textarea.tsx create mode 100644 app/docs/morphing-popover/page.mdx create mode 100644 app/docs/navigation.ts create mode 100644 app/docs/page.mdx create mode 100644 app/docs/progressive-blur/page.mdx create mode 100644 app/docs/progressive-blur/progressive-blur-basic.tsx create mode 100644 app/docs/progressive-blur/progressive-blur-hover.tsx create mode 100644 app/docs/progressive-blur/progressive-blur-slider.tsx create mode 100644 app/docs/scroll-progress/page.mdx create mode 100644 app/docs/scroll-progress/scroll-progress-basic-1.tsx create mode 100644 app/docs/scroll-progress/scroll-progress-basic-2.tsx create mode 100644 app/docs/scroll-progress/scroll-progress-basic-3.tsx create mode 100644 app/docs/sliding-number/clock.tsx create mode 100644 app/docs/sliding-number/page.mdx create mode 100644 app/docs/sliding-number/sliding-basic.tsx create mode 100644 app/docs/sliding-number/sliding-slider.tsx create mode 100644 app/docs/spinning-text/page.mdx create mode 100644 app/docs/spinning-text/spinning-text-basic.tsx create mode 100644 app/docs/spinning-text/spinning-text-custom-transition.tsx create mode 100644 app/docs/spinning-text/spinning-text-custom-variants.tsx create mode 100644 app/docs/spotlight/page.mdx create mode 100644 app/docs/spotlight/spotlight-basic.tsx create mode 100644 app/docs/spotlight/spotlight-border.tsx create mode 100644 app/docs/spotlight/spotlight-custom-color.tsx create mode 100644 app/docs/text-effect/page.mdx create mode 100644 app/docs/text-effect/text-effect-custom-delay.tsx create mode 100644 app/docs/text-effect/text-effect-exit.tsx create mode 100644 app/docs/text-effect/text-effect-line.tsx create mode 100644 app/docs/text-effect/text-effect-per-char.tsx create mode 100644 app/docs/text-effect/text-effect-per-word.tsx create mode 100644 app/docs/text-effect/text-effect-preset.tsx create mode 100644 app/docs/text-effect/text-effect-speed.tsx create mode 100644 app/docs/text-effect/text-effect-variants.tsx create mode 100644 app/docs/text-loop/page.mdx create mode 100644 app/docs/text-loop/text-loop-basic.tsx create mode 100644 app/docs/text-loop/text-loop-custom-variants-transition.tsx create mode 100644 app/docs/text-loop/text-loop-on-index.tsx create mode 100644 app/docs/text-morph/page.mdx create mode 100644 app/docs/text-morph/text-morph-button.tsx create mode 100644 app/docs/text-morph/text-morph-input.tsx create mode 100644 app/docs/text-roll/page.mdx create mode 100644 app/docs/text-roll/text-roll-basic.tsx create mode 100644 app/docs/text-roll/text-roll-custom-transition-delay.tsx create mode 100644 app/docs/text-roll/text-roll-custom-variants.tsx create mode 100644 app/docs/text-scramble/page.mdx create mode 100644 app/docs/text-scramble/text-scramble-basic.tsx create mode 100644 app/docs/text-scramble/text-scramble-custom-char-duration.tsx create mode 100644 app/docs/text-scramble/text-scramble-custom-trigger.tsx create mode 100644 app/docs/text-shimmer-wave/page.mdx create mode 100644 app/docs/text-shimmer-wave/text-shimmer-wave-basic.tsx create mode 100644 app/docs/text-shimmer-wave/text-shimmer-wave-color.tsx create mode 100644 app/docs/text-shimmer/page.mdx create mode 100644 app/docs/text-shimmer/text-shimmer-basic.tsx create mode 100644 app/docs/text-shimmer/text-shimmer-color.tsx create mode 100644 app/docs/tilt/page.mdx create mode 100644 app/docs/tilt/tilt-card-1.tsx create mode 100644 app/docs/tilt/tilt-spotlight.tsx create mode 100644 app/docs/toolbar-dynamic/page.mdx create mode 100644 app/docs/toolbar-expandable/page.mdx create mode 100644 app/docs/transition-panel/page.mdx create mode 100644 app/docs/transition-panel/transition-panel-card.tsx create mode 100644 app/docs/transition-panel/transition-panel-tabs.tsx create mode 100644 app/globals.css create mode 100644 app/icon.ico create mode 100644 app/layout.tsx create mode 100644 app/opengraph-image.alt create mode 100644 app/opengraph-image.jpg create mode 100644 app/page.tsx create mode 100644 app/showcase/page.tsx create mode 100644 app/twitter-image.alt create mode 100644 app/twitter-image.jpg create mode 100644 bun.lockb create mode 100644 cli/.gitignore create mode 100644 cli/README.md create mode 100644 cli/package-lock.json create mode 100644 cli/package.json create mode 100644 cli/src/index.ts create mode 100644 cli/tsconfig.json create mode 100644 components.json create mode 100644 components/core/accordion.tsx create mode 100644 components/core/animated-background.tsx create mode 100644 components/core/animated-group.tsx create mode 100644 components/core/animated-number.tsx create mode 100644 components/core/border-trail.tsx create mode 100644 components/core/carousel.tsx create mode 100644 components/core/cursor.tsx create mode 100644 components/core/dialog.tsx create mode 100644 components/core/disclosure.tsx create mode 100644 components/core/dock.tsx create mode 100644 components/core/glow-effect.tsx create mode 100644 components/core/image-comparison.tsx create mode 100644 components/core/in-view.tsx create mode 100644 components/core/infinite-slider.tsx create mode 100644 components/core/magnetic.tsx create mode 100644 components/core/morphing-dialog.tsx create mode 100644 components/core/morphing-popover.tsx create mode 100644 components/core/progressive-blur.tsx create mode 100644 components/core/scroll-progress.tsx create mode 100644 components/core/sliding-number.tsx create mode 100644 components/core/spinning-text.tsx create mode 100644 components/core/spotlight.tsx create mode 100644 components/core/text-effect.tsx create mode 100644 components/core/text-loop.tsx create mode 100644 components/core/text-morph.tsx create mode 100644 components/core/text-roll.tsx create mode 100644 components/core/text-scramble.tsx create mode 100644 components/core/text-shimmer-wave.tsx create mode 100644 components/core/text-shimmer.tsx create mode 100644 components/core/tilt.tsx create mode 100644 components/core/toolbar-dynamic.tsx create mode 100644 components/core/toolbar-expandable.tsx create mode 100644 components/core/transition-panel.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/label.tsx create mode 100644 components/ui/tooltip.tsx create mode 100644 components/website/card-example-landing.tsx create mode 100644 components/website/code-block.tsx create mode 100644 components/website/code-preview.tsx create mode 100644 components/website/code-renderer.tsx create mode 100644 components/website/component-code-preview.tsx create mode 100644 components/website/component-preview.tsx create mode 100644 components/website/dropdown-menu.tsx create mode 100644 components/website/header.tsx create mode 100644 components/website/icons/github.tsx create mode 100644 components/website/icons/motion-primitives-logo.tsx create mode 100644 components/website/icons/shadcn-logo.tsx create mode 100644 components/website/icons/x.tsx create mode 100644 components/website/installation-cli.tsx create mode 100644 components/website/launch-banner.tsx create mode 100644 components/website/open-in-v0.tsx create mode 100644 components/website/scroll-area.tsx create mode 100644 components/website/table-of-contents.tsx create mode 100644 components/website/tabs.tsx create mode 100644 components/website/theme-provider.tsx create mode 100644 components/website/theme-switch.tsx create mode 100644 hooks/useClickOutside.tsx create mode 100644 hooks/usePreventScroll.tsx create mode 100644 lib/browser.ts create mode 100644 lib/code.ts create mode 100644 lib/custom-theme.ts create mode 100644 lib/shiki.ts create mode 100644 lib/theme-css-variables.ts create mode 100644 lib/utils.ts create mode 100644 mdx-components.tsx create mode 100644 next.config.mjs create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.mjs create mode 100644 prettier.config.js create mode 100644 public/apple_music_logo.svg create mode 100644 public/c/accordion.json create mode 100644 public/c/animated-background.json create mode 100644 public/c/animated-group.json create mode 100644 public/c/animated-number.json create mode 100644 public/c/border-trail.json create mode 100644 public/c/carousel.json create mode 100644 public/c/cursor.json create mode 100644 public/c/dialog.json create mode 100644 public/c/disclosure.json create mode 100644 public/c/dock.json create mode 100644 public/c/glow-effect.json create mode 100644 public/c/image-comparison.json create mode 100644 public/c/in-view.json create mode 100644 public/c/infinite-slider.json create mode 100644 public/c/magnetic.json create mode 100644 public/c/morphing-dialog.json create mode 100644 public/c/morphing-popover.json create mode 100644 public/c/progressive-blur.json create mode 100644 public/c/registry.json create mode 100644 public/c/scroll-progress.json create mode 100644 public/c/sliding-number.json create mode 100644 public/c/spinning-text.json create mode 100644 public/c/spotlight.json create mode 100644 public/c/text-effect.json create mode 100644 public/c/text-loop.json create mode 100644 public/c/text-morph.json create mode 100644 public/c/text-roll.json create mode 100644 public/c/text-scramble.json create mode 100644 public/c/text-shimmer-wave.json create mode 100644 public/c/text-shimmer.json create mode 100644 public/c/tilt.json create mode 100644 public/c/toolbar-dynamic.json create mode 100644 public/c/toolbar-expandable.json create mode 100644 public/c/transition-panel.json create mode 100644 public/chrome_logo.svg create mode 100644 public/e/accordion-basic.json create mode 100644 public/e/accordion-icons.json create mode 100644 public/e/accordion-variant.json create mode 100644 public/e/animated-card-background-hover.json create mode 100644 public/e/animated-group-custom-variants-2.json create mode 100644 public/e/animated-group-custom-variants.json create mode 100644 public/e/animated-group-preset.json create mode 100644 public/e/animated-number-basic.json create mode 100644 public/e/animated-number-counter.json create mode 100644 public/e/animated-number-in-view.json create mode 100644 public/e/animated-tabs-hover.json create mode 100644 public/e/animated-tabs.json create mode 100644 public/e/apple-style-dock.json create mode 100644 public/e/border-trail-card-1.json create mode 100644 public/e/border-trail-card-2.json create mode 100644 public/e/border-trail-textarea.json create mode 100644 public/e/carousel-basic.json create mode 100644 public/e/carousel-custom-indicator.json create mode 100644 public/e/carousel-custom-sizes.json create mode 100644 public/e/carousel-spacing.json create mode 100644 public/e/clock.json create mode 100644 public/e/cursor-1.json create mode 100644 public/e/cursor-2.json create mode 100644 public/e/cursor-3.json create mode 100644 public/e/dialog-basic.json create mode 100644 public/e/dialog-controlled.json create mode 100644 public/e/dialog-custom-backdrop.json create mode 100644 public/e/dialog-custom-exit.json create mode 100644 public/e/dialog-custom-variants-transtion.json create mode 100644 public/e/disclosure-basic.json create mode 100644 public/e/disclosure-card.json create mode 100644 public/e/glow-effect-button.json create mode 100644 public/e/glow-effect-card-background.json create mode 100644 public/e/glow-effect-card-mode.json create mode 100644 public/e/image-comparison-basic.json create mode 100644 public/e/image-comparison-custom-slider.json create mode 100644 public/e/image-comparison-hover.json create mode 100644 public/e/image-comparison-spring.json create mode 100644 public/e/in-view-basic-multiple.json create mode 100644 public/e/in-view-basic.json create mode 100644 public/e/in-view-images-grid.json create mode 100644 public/e/infinite-slider-basic.json create mode 100644 public/e/infinite-slider-hover-speed.json create mode 100644 public/e/infinite-slider-vertical.json create mode 100644 public/e/magnetic-basic.json create mode 100644 public/e/magnetic-nested.json create mode 100644 public/e/morphing-dialog-basic-1.json create mode 100644 public/e/morphing-dialog-basic-2.json create mode 100644 public/e/morphing-dialog-image.json create mode 100644 public/e/morphing-popover-basic.json create mode 100644 public/e/morphing-popover-custom-transition-variants.json create mode 100644 public/e/morphing-popover-textarea.json create mode 100644 public/e/progressive-blur-basic.json create mode 100644 public/e/progressive-blur-hover.json create mode 100644 public/e/progressive-blur-slider.json create mode 100644 public/e/scroll-progress-basic-1.json create mode 100644 public/e/scroll-progress-basic-2.json create mode 100644 public/e/scroll-progress-basic-3.json create mode 100644 public/e/segmented-control.json create mode 100644 public/e/sliding-basic.json create mode 100644 public/e/sliding-slider.json create mode 100644 public/e/spinning-text-basic.json create mode 100644 public/e/spinning-text-custom-transition.json create mode 100644 public/e/spinning-text-custom-variants.json create mode 100644 public/e/spotlight-basic.json create mode 100644 public/e/spotlight-border.json create mode 100644 public/e/spotlight-custom-color.json create mode 100644 public/e/text-effect-custom-delay.json create mode 100644 public/e/text-effect-exit.json create mode 100644 public/e/text-effect-line.json create mode 100644 public/e/text-effect-per-char.json create mode 100644 public/e/text-effect-per-word.json create mode 100644 public/e/text-effect-preset.json create mode 100644 public/e/text-effect-speed.json create mode 100644 public/e/text-effect-variants.json create mode 100644 public/e/text-loop-basic.json create mode 100644 public/e/text-loop-custom-variants-transition.json create mode 100644 public/e/text-loop-on-index.json create mode 100644 public/e/text-morph-button.json create mode 100644 public/e/text-morph-input.json create mode 100644 public/e/text-roll-basic.json create mode 100644 public/e/text-roll-custom-transition-delay.json create mode 100644 public/e/text-roll-custom-variants.json create mode 100644 public/e/text-scramble-basic.json create mode 100644 public/e/text-scramble-custom-char-duration.json create mode 100644 public/e/text-scramble-custom-trigger.json create mode 100644 public/e/text-shimmer-basic.json create mode 100644 public/e/text-shimmer-color.json create mode 100644 public/e/text-shimmer-wave-basic.json create mode 100644 public/e/text-shimmer-wave-color.json create mode 100644 public/e/tilt-card-1.json create mode 100644 public/e/tilt-spotlight.json create mode 100644 public/e/transition-panel-card.json create mode 100644 public/e/transition-panel-tabs.json create mode 100644 public/eb-27-lamp-edouard-wilfrid-buquet.jpg create mode 100644 public/gucci_logo.svg create mode 100644 public/h/useClickOutside.json create mode 100644 public/h/usePreventScroll.json create mode 100644 public/jquery_logo.svg create mode 100644 public/mp_dark.png create mode 100644 public/mp_light.png create mode 100644 public/national_geographic_logo.svg create mode 100644 public/nintendo_logo.svg create mode 100644 public/prada_logo.svg create mode 100644 public/sony_logo.svg create mode 100644 public/strava_logo.svg create mode 100644 scripts/registry-build.ts create mode 100644 scripts/registry-components.ts create mode 100644 scripts/registry-examples.ts create mode 100644 scripts/registry-hooks.ts create mode 100644 scripts/registry-schema.ts create mode 100644 tsconfig.json diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 00000000..0a76b3ac --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,8 @@ +{ + "extends": [ + "next/core-web-vitals", + "prettier", + "plugin:tailwindcss/recommended" + ], + "plugins": ["tailwindcss"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..8dbbacaf --- /dev/null +++ b/.gitignore @@ -0,0 +1,40 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# cli +cli/dist +cli/node_modules diff --git a/.vercelignore b/.vercelignore new file mode 100644 index 00000000..3864e878 --- /dev/null +++ b/.vercelignore @@ -0,0 +1 @@ +/cli diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..c21e1e07 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,78 @@ +# Contributing + +Thanks for your interest in contributing to motion-primitive. We're happy to have you here. + +Please take a moment to review this document before submitting your first pull request. We also strongly recommend that you check for open issues and pull request to see if someone else is working on something similar. + +If you need any help, feel free to reach out to [@ibelick](https://x.com/Ibelick). + +## About this repository + +- We use [npm](https://docs.npmjs.com). +- For animation [framer](https://www.framer.com/motion) +- For custom icons [lucid react](https://lucide.dev/guide/) + +## Development + +### Fork this repo + +You can fork this repo by clicking the fork button in the top right corner of this page. + +### Clone on your local machine + +```bash +git clone https://github.com/ibelick/motion-primitives.git +``` + +### Navigate to project directory + +```bash +cd motion-primitives +``` + +### Create a new Branch + +```bash +git checkout -b my-new-branch +``` + +### Install dependencies + +```bash +npm install +``` + +## Commit Convention + +Before you create a Pull Request, please check whether your commits comply with +the commit conventions used in this repository. + +When you create a commit we kindly ask you to follow the convention +`category(scope or module): message` in your commit message while using one of +the following categories: + +- `feat / feature`: all changes that introduce completely new code or new + features +- `fix`: changes that fix a bug (ideally you will additionally reference an + issue if present) +- `refactor`: any code related change that is not a fix nor a feature +- `docs`: changing existing or creating new documentation (i.e. README, docs for + usage of a lib or cli usage) +- `build`: all changes regarding the build of the software, changes to + dependencies or the addition of new dependencies +- `test`: all changes regarding tests (adding new tests or changing existing + ones) +- `ci`: all changes regarding the configuration of continuous integration (i.e. + github actions, ci system) +- `chore`: all changes to the repository that do not fit into any of the above + categories + + e.g. `feat(components): add new prop to the avatar component` + +If you are interested in the detailed specification you can visit +https://www.conventionalcommits.org/ or check out the +[Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines). + +## Requests for new components + +If you have a request for a new component, please open a discussion on GitHub. We'll be happy to help you out. diff --git a/LICENCE.md b/LICENCE.md new file mode 100644 index 00000000..1a911b3b --- /dev/null +++ b/LICENCE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2024 ibelick + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. +app/page.tsx diff --git a/README.md b/README.md new file mode 100644 index 00000000..cbbeeee2 --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +# Motion-Primitives + +Beautifully designed, easy-to-integrate motion components for engineers and designers, built with [motion](https://motion.dev/) and [Tailwind CSS](https://tailwindcss.com/). + +**This project is in beta. Expect new components to be released regularly and significant updates to the code.** + +

+hero +

+ +## Documentation + +Visit [motion-primitives.com/docs](http://motion-primitives.com/docs) to view the full documentation. + +## Contributing + +Please read the [contributing guide](/CONTRIBUTING.md). + +## License + +Licensed under the [MIT license](/LICENSE.md). diff --git a/app/docs/accordion/accordion-basic.tsx b/app/docs/accordion/accordion-basic.tsx new file mode 100644 index 00000000..4b8ba8ba --- /dev/null +++ b/app/docs/accordion/accordion-basic.tsx @@ -0,0 +1,69 @@ +import { + Accordion, + AccordionItem, + AccordionTrigger, + AccordionContent, +} from '@/components/core/accordion'; + +export function AccordionBasic() { + return ( + + + + Getting Started + + +

+ Discover the fundamental concepts of Motion-Primitives. This section + guides you through the installation process and provides an overview + of how to integrate these components into your projects. Learn about + the core functionalities and how to set up your first animation + effectively. +

+
+
+ + + Animation Properties + + +

+ Explore the comprehensive range of animation properties available in + Motion-Primitives. Understand how to manipulate timing, easing, and + delays to create smooth, dynamic animations. This segment also + covers the customization of animations to fit the flow and style of + your web applications. +

+
+
+ + + Advanced Usage + + +

+ Dive deeper into advanced techniques and features of + Motion-Primitives. Learn about chaining animations, creating complex + sequences, and utilizing motion sensors for interactive animations. + Gain insights on how to leverage these advanced features to enhance + user experience and engagement. +

+
+
+ + + Community and Support + + +

+ Engage with the Motion-Primitives community to gain additional + support and insight. Find out how to participate in discussions, + contribute to the project, and access a wealth of shared knowledge + and resources. Learn about upcoming features, best practices, and + how to get help with your specific use cases. +

+
+
+
+ ); +} diff --git a/app/docs/accordion/accordion-icons.tsx b/app/docs/accordion/accordion-icons.tsx new file mode 100644 index 00000000..a1133992 --- /dev/null +++ b/app/docs/accordion/accordion-icons.tsx @@ -0,0 +1,85 @@ +import { + Accordion, + AccordionItem, + AccordionTrigger, + AccordionContent, +} from '@/components/core/accordion'; +import { ChevronUp } from 'lucide-react'; + +export function AccordionIcons() { + return ( + + + +
+
Getting Started
+ +
+
+ +

+ Discover the fundamental concepts of Motion-Primitives. This section + guides you through the installation process and provides an overview + of how to integrate these components into your projects. Learn about + the core functionalities and how to set up your first animation + effectively. +

+
+
+ + +
+
Animation Properties
+ +
+
+ +

+ Explore the comprehensive range of animation properties available in + Motion-Primitives. Understand how to manipulate timing, easing, and + delays to create smooth, dynamic animations. This segment also + covers the customization of animations to fit the flow and style of + your web applications. +

+
+
+ + +
+
Advanced Usage
+ +
+
+ +

+ Dive deeper into advanced techniques and features of + Motion-Primitives. Learn about chaining animations, creating complex + sequences, and utilizing motion sensors for interactive animations. + Gain insights on how to leverage these advanced features to enhance + user experience and engagement. +

+
+
+ + +
+
Community and Support
+ +
+
+ +

+ Engage with the Motion-Primitives community to gain additional + support and insight. Find out how to participate in discussions, + contribute to the project, and access a wealth of shared knowledge + and resources. Learn about upcoming features, best practices, and + how to get help with your specific use cases. +

+
+
+
+ ); +} diff --git a/app/docs/accordion/accordion-variant.tsx b/app/docs/accordion/accordion-variant.tsx new file mode 100644 index 00000000..9202320e --- /dev/null +++ b/app/docs/accordion/accordion-variant.tsx @@ -0,0 +1,98 @@ +import { + Accordion, + AccordionItem, + AccordionTrigger, + AccordionContent, +} from '@/components/core/accordion'; +import { ChevronRight } from 'lucide-react'; + +export function AccordionVariant() { + return ( + + + +
+ +
+ How do I start with Motion-Primitives? +
+
+
+ +

+ Kick off your experience by setting up Motion-Primitives. This + section covers the basics of installation and how to add animations + to your projects. You’ll get familiar with the initial setup and the + core features quickly. +

+
+
+ + +
+ +
+ What are the key animation properties? +
+
+
+ +

+ Discover a variety of properties to customize your animations. Learn + to adjust timing, easing, and delays for smoother effects. This + guide will help you tailor these settings to your app’s needs. +

+
+
+ + +
+ +
+ How do I use advanced features? +
+
+
+ +

+ Advance your skills by using more complex functions of + Motion-Primitives. Explore how to link animations together, create + intricate sequences, and interact with motion sensors for dynamic + effects. +

+
+
+ + +
+ +
+ How do I engage with the community? +
+
+
+ +

+ Connect with the Motion-Primitives community for support and + collaboration. Learn how to contribute, share knowledge, and access + helpful resources. Stay updated on new updates and collective + insights. +

+
+
+
+ ); +} diff --git a/app/docs/accordion/page.mdx b/app/docs/accordion/page.mdx new file mode 100644 index 00000000..4c36572c --- /dev/null +++ b/app/docs/accordion/page.mdx @@ -0,0 +1,109 @@ +export const metadata = { + title: 'Accordion - Motion-Primitives', + description: + 'A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.', +}; + +import { AccordionBasic } from './accordion-basic'; +import { AccordionIcons } from './accordion-icons'; +import { AccordionVariant } from './accordion-variant'; +import ComponentCodePreview from '@/components/website/component-code-preview'; + +# Accordion + +A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections. + +## Examples + +### Accordion Basic + +} + filePath='app/docs/accordion/accordion-basic.tsx' +/> + +### Accordion with icons + +You can control transformations on elements inside `AccordionTrigger` using `group-data-[expanded]:....`. +Here, we apply `-rotate-180` to rotate the icon 180 degrees when its associated section is expanded. + +} + filePath='app/docs/accordion/accordion-icons.tsx' +/> + +### Accordion custom variants + +} + filePath='app/docs/accordion/accordion-variant.tsx' +/> + +## Installation + + + + + CLI + Manual + + + + + + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Component API + +### Accordion + +| Prop | Type | Default | Description | +| :------------ | :------------------------------------------ | :------ | :------------------------------------------------------ | +| children | ReactNode | | The content elements of the accordion. | +| className | string | | Optional CSS class for styling the accordion container. | +| transition | Transition | | Transition settings from motion for animation effects. | +| variants | `{ expanded: Variant; collapsed: Variant }` | | Custom variants for expanded and collapsed states. | +| expandedValue | React.Key \| null | | Controlled expanded value. | +| onValueChange | (value: React.Key \| null) => void | | Callback function when the expanded value changes. | + +### AccordionItem + +| Prop | Type | Default | Description | +| :-------- | :-------- | :------ | :----------------------------------------------------------- | +| value | React.Key | | Unique identifier for controlling the accordion item state. | +| children | ReactNode | | The content elements of the accordion item. | +| className | string | | Optional CSS class for styling the accordion item container. | + +### AccordionTrigger + +| Prop | Type | Default | Description | +| :-------- | :-------- | :------ | :------------------------------------------------------------ | +| children | ReactNode | | Content of the trigger, typically a string or formatted text. | +| className | string | | Optional CSS class for styling the trigger element. | + +### AccordionContent + +| Prop | Type | Default | Description | +| :-------- | :-------- | :------ | :--------------------------------------------------------- | +| children | ReactNode | | The content displayed when the accordion item is expanded. | +| className | string | | Optional CSS class for styling the content container. | diff --git a/app/docs/animated-background/animated-card-background-hover.tsx b/app/docs/animated-background/animated-card-background-hover.tsx new file mode 100644 index 00000000..4e72c298 --- /dev/null +++ b/app/docs/animated-background/animated-card-background-hover.tsx @@ -0,0 +1,63 @@ +import { AnimatedBackground } from '@/components/core/animated-background'; + +export function AnimatedCardBackgroundHover() { + const ITEMS = [ + { + id: 1, + title: 'Dialog', + description: 'Enhances modal presentations.', + }, + { + id: 2, + title: 'Popover', + description: 'For small interactive overlays.', + }, + { + id: 3, + title: 'Accordion', + description: 'Collapsible sections for more content.', + }, + { + id: 4, + title: 'Collapsible', + description: 'Collapsible sections for more content.', + }, + { + id: 5, + title: 'Drag to Reorder', + description: 'Reorder items with drag and drop.', + }, + { + id: 6, + title: 'Swipe to Delete', + description: 'Delete items with swipe gestures.', + }, + ]; + + return ( +
+ + {ITEMS.map((item, index) => ( +
+
+

+ {item.title} +

+

+ {item.description} +

+
+
+ ))} +
+
+ ); +} diff --git a/app/docs/animated-background/animated-tabs-hover.tsx b/app/docs/animated-background/animated-tabs-hover.tsx new file mode 100644 index 00000000..709105a2 --- /dev/null +++ b/app/docs/animated-background/animated-tabs-hover.tsx @@ -0,0 +1,31 @@ +import { AnimatedBackground } from '@/components/core/animated-background'; + +export function AnimatedTabsHover() { + const TABS = ['Home', 'About', 'Services', 'Contact']; + + return ( +
+ + {TABS.map((tab, index) => ( + + ))} + +
+ ); +} diff --git a/app/docs/animated-background/animated-tabs.tsx b/app/docs/animated-background/animated-tabs.tsx new file mode 100644 index 00000000..10b79f76 --- /dev/null +++ b/app/docs/animated-background/animated-tabs.tsx @@ -0,0 +1,50 @@ +import { Home, PhoneCall, Settings, User } from 'lucide-react'; +import { AnimatedBackground } from '@/components/core/animated-background'; + +export function AnimatedTabs() { + const TABS = [ + { + label: 'Home', + icon: , + }, + { + label: 'About', + icon: , + }, + { + label: 'Services', + icon: , + }, + { + label: 'Contact', + icon: , + }, + ]; + + return ( +
+
+ + {TABS.map((tab) => ( + + ))} + +
+
+ ); +} diff --git a/app/docs/animated-background/page.mdx b/app/docs/animated-background/page.mdx new file mode 100644 index 00000000..8278a175 --- /dev/null +++ b/app/docs/animated-background/page.mdx @@ -0,0 +1,87 @@ +export const metadata = { + title: 'Animated background - Motion-Primitives', + description: + 'Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important.', +}; + +import { AnimatedTabs } from './animated-tabs'; +import { AnimatedTabsHover } from './animated-tabs-hover'; +import { AnimatedCardBackgroundHover } from './animated-card-background-hover'; +import { SegmentedControl } from './segmented-control'; +import ComponentCodePreview from '@/components/website/component-code-preview'; + +# Animated Background + +Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigations where clear selection feedback is important.', + +## Examples + +### Animated Tabs + +} + filePath='app/docs/animated-background/animated-tabs.tsx' +/> + +### Animated Tabs Hover + +} + filePath='app/docs/animated-background/animated-tabs-hover.tsx' +/> + +### Animated Card Background + +} + filePath='app/docs/animated-background/animated-card-background-hover.tsx' +/> + +### Segmented Control + +} + filePath='app/docs/animated-background/segmented-control.tsx' +/> + +## Installation + + + + + CLI + Manual + + + + + + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Component API + +| Prop | Type | Default | Description | +| :------------ | :------------------------------------------------------------------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------- | +| children | ReactElement with 'data-id' string attribute array or single element | | The content to be displayed within the animated background. **Each child must have a unique `data-id` attribute to ensure correct functionality.** | +| defaultValue | string | | The default value to be used as the active item identifier. | +| onValueChange | (newActiveId: string \| null) => void | | Callback function that is called when the active item changes. | +| className | string | | The class name to apply to the animated background for custom styling. | +| transition | Transition | | The transition effect from motion for animation effects. | +| enableHover | boolean | false | Enables or disables the hover effect. When `enableHover` is true, spacing between children cannot be added. | diff --git a/app/docs/animated-background/segmented-control.tsx b/app/docs/animated-background/segmented-control.tsx new file mode 100644 index 00000000..90552931 --- /dev/null +++ b/app/docs/animated-background/segmented-control.tsx @@ -0,0 +1,30 @@ +import { AnimatedBackground } from '@/components/core/animated-background'; + +export function SegmentedControl() { + return ( +
+ + {['Day', 'Week', 'Month', 'Year'].map((label, index) => { + return ( + + ); + })} + +
+ ); +} diff --git a/app/docs/animated-group/animated-group-custom-variants-2.tsx b/app/docs/animated-group/animated-group-custom-variants-2.tsx new file mode 100644 index 00000000..56fbf6ca --- /dev/null +++ b/app/docs/animated-group/animated-group-custom-variants-2.tsx @@ -0,0 +1,63 @@ +'use client'; +import { AnimatedGroup } from '@/components/core/animated-group'; + +export function AnimatedGroupCustomVariants2() { + return ( + +
+ Apple Music logo +
+
+ Chrome logo +
+
+ Strava logo +
+
+ Nintendo logo +
+
+ ); +} diff --git a/app/docs/animated-group/animated-group-custom-variants.tsx b/app/docs/animated-group/animated-group-custom-variants.tsx new file mode 100644 index 00000000..e408dfd6 --- /dev/null +++ b/app/docs/animated-group/animated-group-custom-variants.tsx @@ -0,0 +1,54 @@ +import { AnimatedGroup } from '@/components/core/animated-group'; + +export function AnimatedGroupCustomVariants() { + return ( + + impressionist painting, uploaded to Cosmos + impressionist painting, uploaded to Cosmos + impressionist painting, uploaded to Cosmos + impressionist painting, uploaded to Cosmos + + ); +} diff --git a/app/docs/animated-group/animated-group-preset.tsx b/app/docs/animated-group/animated-group-preset.tsx new file mode 100644 index 00000000..d5f94873 --- /dev/null +++ b/app/docs/animated-group/animated-group-preset.tsx @@ -0,0 +1,31 @@ +import { AnimatedGroup } from '@/components/core/animated-group'; + +export function AnimatedGroupPreset() { + return ( + + impressionist painting, uploaded to Cosmos + impressionist painting, uploaded to Cosmos + impressionist painting, uploaded to Cosmos + impressionist painting, uploaded to Cosmos + + ); +} diff --git a/app/docs/animated-group/page.mdx b/app/docs/animated-group/page.mdx new file mode 100644 index 00000000..9545dbf5 --- /dev/null +++ b/app/docs/animated-group/page.mdx @@ -0,0 +1,87 @@ +export const metadata = { + title: 'Animated Group - Motion-Primitives', + description: `A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.`, +}; + +import { AnimatedGroupPreset } from './animated-group-preset'; +import { AnimatedGroupCustomVariants } from './animated-group-custom-variants'; +import { AnimatedGroupCustomVariants2 } from './animated-group-custom-variants-2'; +import ComponentCodePreview from '@/components/website/component-code-preview'; +import CodeBlock from '@/components/website/code-block'; + +# Animated Group + +A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components. + +## Examples + +### Animated Group with preset + +Images are from [cosmos - Impressionisme](https://www.cosmos.so/ibelick/impressionnisme) + +} + filePath='app/docs/animated-group/animated-group-preset.tsx' + hasReTrigger +/> + +### Animated Group with custom variants + +} + filePath='app/docs/animated-group/animated-group-custom-variants.tsx' + hasReTrigger +/> + +### AnimatedGroup with custom variants + +} + filePath='app/docs/animated-group/animated-group-custom-variants-2.tsx' + hasReTrigger + classNameComponentContainer='bg-white' +/> + +## Installation + + + + + CLI + Manual + + + + + + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Component API + +### AnimatedGroup + +| Prop | Type | Default | Description | +| :-------- | :-------------------------------------------------------- | :-------- | :--------------------------------------------------- | +| children | ReactNode | | The child elements to be animated. | +| className | string | undefined | Optional CSS class for styling the component. | +| variants | `{ container?: Variants; item?: Variants; }` | undefined | Custom variants for container and item animations. | +| preset | 'fade' \| 'slide' \| 'scale' \| 'blur-sm' \| 'blur-slide' | undefined | Preset animations to apply to the group of elements. | +| as | React.ElementType | 'div' | The HTML element to render the component as. | +| asChild | React.ElementType | 'div' | The HTML element to render the child elements as. | diff --git a/app/docs/animated-number/animated-number-basic.tsx b/app/docs/animated-number/animated-number-basic.tsx new file mode 100644 index 00000000..61c08cd5 --- /dev/null +++ b/app/docs/animated-number/animated-number-basic.tsx @@ -0,0 +1,33 @@ +'use client'; +import { useEffect, useState } from 'react'; +import { AnimatedNumber } from '@/components/core/animated-number'; + +export function AnimatedNumberBasic() { + const [value, setValue] = useState(0); + + useEffect(() => { + setValue(2082); + }, []); + + return ( +
+ + + + +
+ ); +} diff --git a/app/docs/animated-number/animated-number-counter.tsx b/app/docs/animated-number/animated-number-counter.tsx new file mode 100644 index 00000000..e688840c --- /dev/null +++ b/app/docs/animated-number/animated-number-counter.tsx @@ -0,0 +1,33 @@ +'use client'; +import { useState } from 'react'; +import { AnimatedNumber } from '@/components/core/animated-number'; +import { Minus, Plus } from 'lucide-react'; + +export function AnimatedNumberCounter() { + const [value, setValue] = useState(1000); + + return ( +
+ + + +
+ ); +} diff --git a/app/docs/animated-number/animated-number-in-view.tsx b/app/docs/animated-number/animated-number-in-view.tsx new file mode 100644 index 00000000..e90a49cd --- /dev/null +++ b/app/docs/animated-number/animated-number-in-view.tsx @@ -0,0 +1,27 @@ +'use client'; +import { AnimatedNumber } from '@/components/core/animated-number'; +import { useInView } from 'motion/react'; +import { useRef, useState } from 'react'; + +export function AnimatedNumberInView() { + const [value, setValue] = useState(0); + const ref = useRef(null); + const isInView = useInView(ref); + + if (isInView && value === 0) { + setValue(10000); + } + + return ( +
+ +
+ ); +} diff --git a/app/docs/animated-number/page.mdx b/app/docs/animated-number/page.mdx new file mode 100644 index 00000000..6edac01e --- /dev/null +++ b/app/docs/animated-number/page.mdx @@ -0,0 +1,80 @@ +export const metadata = { + title: 'Animated Number - Motion-Primitives', + description: 'Easily animate numbers.', +}; + +import { AnimatedNumberBasic } from './animated-number-basic'; +import { AnimatedNumberCounter } from './animated-number-counter'; +import { AnimatedNumberInView } from './animated-number-in-view'; +import ComponentCodePreview from '@/components/website/component-code-preview'; + +# Animated Number + +Easily animate numbers. + +## Examples + +### Basic + +} + filePath='app/docs/animated-number/animated-number-basic.tsx' + hasReTrigger + classNameComponentContainer='min-h-[250px]' +/> + +### Basic counter + +} + filePath='app/docs/animated-number/animated-number-counter.tsx' + classNameComponentContainer='min-h-[250px]' +/> + +### With useInView + +} + filePath='app/docs/animated-number/animated-number-in-view.tsx' + classNameComponentContainer='min-h-[250px]' +/> + +## Installation + + + + + CLI + Manual + + + + + + + + + + + + +Copy and paste the following code into your project. + + + +Update the import paths to match your project setup. + + + + + + + +## Component API + +| Prop | Type | Default | Description | +| :------------ | :---------------- | :------ | :-------------------------------------------------------- | +| value | number | | The number to be animated. | +| className | string | | Optional CSS class for styling the number item container. | +| springOptions | SpringOptions | | Spring options from motion for the animation. | +| as | React.ElementType | 'span' | The HTML tag to render the number in. | diff --git a/app/docs/border-trail/border-trail-card-1.tsx b/app/docs/border-trail/border-trail-card-1.tsx new file mode 100644 index 00000000..9b9f521a --- /dev/null +++ b/app/docs/border-trail/border-trail-card-1.tsx @@ -0,0 +1,26 @@ +import { BorderTrail } from '@/components/core/border-trail'; + +export function BorderTrailCard1() { + return ( +
+ +
+
+
+
+
+
+
+
+ ); +} diff --git a/app/docs/border-trail/border-trail-card-2.tsx b/app/docs/border-trail/border-trail-card-2.tsx new file mode 100644 index 00000000..4a1aa6e8 --- /dev/null +++ b/app/docs/border-trail/border-trail-card-2.tsx @@ -0,0 +1,49 @@ +'use client'; +import { cn } from '@/lib/utils'; +import { BorderTrail } from '@/components/core/border-trail'; +import { useState } from 'react'; + +export function BorderTrailCard2() { + const [isLoading, setIsLoading] = useState(false); + const [isVisible, setIsVisible] = useState(true); + + const handleAnimationComplete = () => { + setIsLoading(false); + setTimeout(() => setIsVisible(false), 300); + }; + + const handleLoad = () => { + setIsLoading(true); + setIsVisible(true); + }; + + return ( +
+ {isVisible && ( + + )} +
+ +
+
+ ); +} diff --git a/app/docs/border-trail/border-trail-textarea.tsx b/app/docs/border-trail/border-trail-textarea.tsx new file mode 100644 index 00000000..1a17f779 --- /dev/null +++ b/app/docs/border-trail/border-trail-textarea.tsx @@ -0,0 +1,13 @@ +import { BorderTrail } from '@/components/core/border-trail'; + +export function BorderTrailTextarea() { + return ( +
+