@mova-ui/react 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -21
- package/bin/mova.mjs +22 -7
- package/dist/styles.css +131 -1
- package/package.json +62 -14
- package/registry/1.json +14 -0
- package/registry/10.json +14 -0
- package/registry/11.json +14 -0
- package/registry/12.json +14 -0
- package/registry/13.json +14 -0
- package/registry/14.json +14 -0
- package/registry/15.json +14 -0
- package/registry/16.json +14 -0
- package/registry/17.json +14 -0
- package/registry/18.json +14 -0
- package/registry/19.json +14 -0
- package/registry/2.json +14 -0
- package/registry/20.json +14 -0
- package/registry/21.json +14 -0
- package/registry/22.json +14 -0
- package/registry/23.json +14 -0
- package/registry/24.json +14 -0
- package/registry/25.json +14 -0
- package/registry/26.json +14 -0
- package/registry/27.json +14 -0
- package/registry/28.json +14 -0
- package/registry/29.json +14 -0
- package/registry/3.json +14 -0
- package/registry/30.json +14 -0
- package/registry/31.json +14 -0
- package/registry/32.json +14 -0
- package/registry/33.json +14 -0
- package/registry/34.json +14 -0
- package/registry/35.json +14 -0
- package/registry/36.json +11 -0
- package/registry/37.json +11 -0
- package/registry/4.json +14 -0
- package/registry/5.json +14 -0
- package/registry/6.json +14 -0
- package/registry/7.json +14 -0
- package/registry/8.json +14 -0
- package/registry/9.json +14 -0
- package/registry/LICENSE.third-party +283 -0
- package/registry/ab-segmented-tabs.json +14 -0
- package/registry/accordion-blind.json +14 -0
- package/registry/analyzing-image.json +13 -0
- package/registry/animated-sidebar.json +14 -0
- package/registry/animated-tags.json +14 -0
- package/registry/blur-up-char.json +14 -0
- package/registry/blur-up-word.json +14 -0
- package/registry/bookmark-corner-peel.json +14 -0
- package/registry/bookmark-save-pill.json +14 -0
- package/registry/bookmark-toggle.json +14 -0
- package/registry/border-trail-loading.json +13 -0
- package/registry/bounce-in-char.json +14 -0
- package/registry/btn-1.json +14 -0
- package/registry/btn-10.json +14 -0
- package/registry/btn-11.json +14 -0
- package/registry/btn-12.json +14 -0
- package/registry/btn-13.json +14 -0
- package/registry/btn-14.json +14 -0
- package/registry/btn-15.json +14 -0
- package/registry/btn-16.json +14 -0
- package/registry/btn-17.json +14 -0
- package/registry/btn-18.json +14 -0
- package/registry/btn-19.json +14 -0
- package/registry/btn-2.json +14 -0
- package/registry/btn-20.json +14 -0
- package/registry/btn-21.json +14 -0
- package/registry/btn-22.json +14 -0
- package/registry/btn-23.json +14 -0
- package/registry/btn-24.json +14 -0
- package/registry/btn-25.json +14 -0
- package/registry/btn-26.json +14 -0
- package/registry/btn-27.json +14 -0
- package/registry/btn-28.json +14 -0
- package/registry/btn-29.json +14 -0
- package/registry/btn-3.json +14 -0
- package/registry/btn-30.json +14 -0
- package/registry/btn-31.json +14 -0
- package/registry/btn-32.json +14 -0
- package/registry/btn-33.json +14 -0
- package/registry/btn-34.json +14 -0
- package/registry/btn-35.json +14 -0
- package/registry/btn-36.json +11 -0
- package/registry/btn-37.json +11 -0
- package/registry/btn-4.json +14 -0
- package/registry/btn-5.json +14 -0
- package/registry/btn-6.json +14 -0
- package/registry/btn-7.json +14 -0
- package/registry/btn-8.json +14 -0
- package/registry/btn-9.json +14 -0
- package/registry/button-slide-arrow.json +14 -0
- package/registry/cacheable-bandwidth-cost.json +14 -0
- package/registry/card-arc-5.json +13 -0
- package/registry/card-arc-7.json +13 -0
- package/registry/card-carousel-mono.json +14 -0
- package/registry/card-carousel.json +14 -0
- package/registry/card-cascade-stagger.json +13 -0
- package/registry/card-corner-fan.json +13 -0
- package/registry/card-cover-flow-mono.json +14 -0
- package/registry/card-cover-flow.json +14 -0
- package/registry/card-deck-cascade.json +14 -0
- package/registry/card-glance-preview.json +14 -0
- package/registry/card-linear-spread.json +13 -0
- package/registry/card-long-arc-5.json +13 -0
- package/registry/card-scatter-spread.json +13 -0
- package/registry/card-stack-peel.json +14 -0
- package/registry/card-stamp-arc.json +13 -0
- package/registry/card-time-machine-mono.json +13 -0
- package/registry/card-time-machine.json +13 -0
- package/registry/card-wheel-fan.json +13 -0
- package/registry/category-select.json +14 -0
- package/registry/checkbox-draw.json +14 -0
- package/registry/checkmark-draw.json +14 -0
- package/registry/circle-toggle.json +14 -0
- package/registry/circuit-trace-draw.json +14 -0
- package/registry/circular-create-button.json +11 -0
- package/registry/compass-needle-deflect.json +14 -0
- package/registry/context-menu.json +14 -0
- package/registry/credit-score-barcode-meter.json +14 -0
- package/registry/date-position-selector.json +14 -0
- package/registry/dia-text-reveal.json +14 -0
- package/registry/dislike-toggle.json +14 -0
- package/registry/dither-book.json +14 -0
- package/registry/domino-cascade.json +14 -0
- package/registry/double-bounce-toggle.json +14 -0
- package/registry/download-icons.json +14 -0
- package/registry/drop-in-char.json +14 -0
- package/registry/droplet-squish.json +14 -0
- package/registry/dual-magnet-dipole.json +14 -0
- package/registry/elastic-tag-snap.json +14 -0
- package/registry/error-shake.json +14 -0
- package/registry/expanding-icon-tabs.json +13 -0
- package/registry/fade-in-char.json +14 -0
- package/registry/fade-in-text.json +14 -0
- package/registry/fade-in-word.json +14 -0
- package/registry/file-upload-dropzone.json +14 -0
- package/registry/filter-tag-pill.json +14 -0
- package/registry/flip-x-char.json +14 -0
- package/registry/flip-y-char.json +14 -0
- package/registry/float-char.json +14 -0
- package/registry/float-word.json +14 -0
- package/registry/floating-label-input.json +14 -0
- package/registry/focus-blur.json +13 -0
- package/registry/form-submit-button.json +14 -0
- package/registry/french-doors-3d.json +13 -0
- package/registry/gear-tooth-step.json +14 -0
- package/registry/gelatin-wobble.json +14 -0
- package/registry/geometric-iris-shutter.json +14 -0
- package/registry/glow-text.json +14 -0
- package/registry/gooey-popover.json +13 -0
- package/registry/gradient-shimmer.json +13 -0
- package/registry/hex-lattice-draw.json +14 -0
- package/registry/hover-lift-char.json +14 -0
- package/registry/hover-lift-word.json +14 -0
- package/registry/hover-link-card.json +14 -0
- package/registry/hover-scale-char.json +14 -0
- package/registry/hover-scale-word.json +14 -0
- package/registry/inertia-skid-stop.json +14 -0
- package/registry/input-focus-glow.json +14 -0
- package/registry/inset-action-button.json +11 -0
- package/registry/inset-button.json +12 -0
- package/registry/kinetic-metronome-tick.json +14 -0
- package/registry/kinetic-tension-capsule.json +14 -0
- package/registry/light-dark-morph.json +14 -0
- package/registry/like-toggle.json +14 -0
- package/registry/magnetic-disks.json +14 -0
- package/registry/magnetic-slide-btn.json +14 -0
- package/registry/matrix-grid-loader.json +14 -0
- package/registry/modular-tile-snap.json +14 -0
- package/registry/mono-activity-blue.json +13 -0
- package/registry/mono-activity-green.json +13 -0
- package/registry/mono-activity-purple.json +13 -0
- package/registry/mono-heatmap.json +14 -0
- package/registry/mono-rounded-area.json +13 -0
- package/registry/mono-rounded-bar.json +13 -0
- package/registry/mono-rounded-bubble.json +13 -0
- package/registry/mono-rounded-bullet.json +11 -0
- package/registry/mono-rounded-candlestick.json +11 -0
- package/registry/mono-rounded-composed.json +13 -0
- package/registry/mono-rounded-donut.json +13 -0
- package/registry/mono-rounded-funnel.json +13 -0
- package/registry/mono-rounded-gauge-arc.json +13 -0
- package/registry/mono-rounded-heatmap.json +11 -0
- package/registry/mono-rounded-kpi.json +13 -0
- package/registry/mono-rounded-line.json +13 -0
- package/registry/mono-rounded-meter.json +13 -0
- package/registry/mono-rounded-polar.json +13 -0
- package/registry/mono-rounded-pyramid.json +11 -0
- package/registry/mono-rounded-radar.json +13 -0
- package/registry/mono-rounded-radial-gauge.json +13 -0
- package/registry/mono-rounded-radial-group.json +13 -0
- package/registry/mono-rounded-range.json +13 -0
- package/registry/mono-rounded-sankey.json +11 -0
- package/registry/mono-rounded-scatter.json +13 -0
- package/registry/mono-rounded-sparkline.json +13 -0
- package/registry/mono-rounded-stacked-bar.json +13 -0
- package/registry/mono-rounded-step.json +13 -0
- package/registry/mono-rounded-stream.json +13 -0
- package/registry/mono-rounded-treemap.json +11 -0
- package/registry/mono-rounded-waterfall.json +13 -0
- package/registry/mono-stock.json +14 -0
- package/registry/morph-action-pill.json +14 -0
- package/registry/morph-toggle.json +14 -0
- package/registry/multi-select-chips.json +14 -0
- package/registry/multi-tab-bar.json +14 -0
- package/registry/neon-sign-draw.json +14 -0
- package/registry/nested-orbital-gimbal.json +14 -0
- package/registry/network-telemetry-matrix.json +14 -0
- package/registry/noise-decibel-level.json +14 -0
- package/registry/obsidian-liquid-wave.json +11 -0
- package/registry/origami-envelope-unfold.json +14 -0
- package/registry/otp-input.json +14 -0
- package/registry/overview-bar-scrubber-card.json +14 -0
- package/registry/page-turn-curl.json +14 -0
- package/registry/password-toggle.json +14 -0
- package/registry/pendulum-bubble-level.json +14 -0
- package/registry/perspective-flip-stage.json +13 -0
- package/registry/perspective-flip.json +13 -0
- package/registry/perspective-layout-switcher.json +14 -0
- package/registry/physics-dock.json +14 -0
- package/registry/pill-tabs.json +14 -0
- package/registry/plus-minus-toggle.json +14 -0
- package/registry/prism-block-stack.json +14 -0
- package/registry/progress-indicator-piano.json +14 -0
- package/registry/progress-stepper.json +14 -0
- package/registry/pulse-char.json +14 -0
- package/registry/pulse-word.json +14 -0
- package/registry/pyramid-block-build.json +14 -0
- package/registry/radial-iris-mask.json +13 -0
- package/registry/radial-spinner.json +14 -0
- package/registry/radio-scale.json +14 -0
- package/registry/range-slider.json +14 -0
- package/registry/receipt-tape-print.json +14 -0
- package/registry/rectangle-toggle.json +14 -0
- package/registry/repost-toggle.json +14 -0
- package/registry/reveal-text.json +14 -0
- package/registry/ribbon-banner-slide.json +14 -0
- package/registry/rise-up-word.json +14 -0
- package/registry/roller-blind-drop.json +14 -0
- package/registry/rolling-tumble.json +14 -0
- package/registry/rotate-in-char.json +14 -0
- package/registry/rotating-louvers.json +14 -0
- package/registry/sales-analytics-dual-bars.json +14 -0
- package/registry/sales-overview-radial-dashboard.json +14 -0
- package/registry/sales-target-segmented-arc.json +14 -0
- package/registry/scale-in-char.json +14 -0
- package/registry/scale-in-text.json +14 -0
- package/registry/scale-in-word.json +14 -0
- package/registry/scramble-text.json +13 -0
- package/registry/scroll-canvas-unroll.json +14 -0
- package/registry/search-expand.json +14 -0
- package/registry/segmented-arc-meter.json +14 -0
- package/registry/segmented-link-stretch.json +14 -0
- package/registry/segmented-step-bar.json +14 -0
- package/registry/segmented-stepper-dots.json +14 -0
- package/registry/select-dropdown.json +14 -0
- package/registry/server-performance-step-bars.json +14 -0
- package/registry/shimmer-text.json +14 -0
- package/registry/shutter-slide.json +14 -0
- package/registry/shutter-step-slices.json +14 -0
- package/registry/skew-x-char.json +14 -0
- package/registry/slide-down-char.json +14 -0
- package/registry/slide-down-word.json +14 -0
- package/registry/slide-left-char.json +14 -0
- package/registry/slide-right-char.json +14 -0
- package/registry/slide-up-char.json +14 -0
- package/registry/slide-up-text.json +14 -0
- package/registry/slide-up-word.json +14 -0
- package/registry/slinky-coil.json +14 -0
- package/registry/smart-card-dispenser.json +14 -0
- package/registry/solid-switch.json +14 -0
- package/registry/spatial-door-portal.json +13 -0
- package/registry/split-gate-reveal.json +14 -0
- package/registry/spring-text.json +14 -0
- package/registry/squash-sphere.json +14 -0
- package/registry/stagger-text.json +14 -0
- package/registry/staggered-glass-curtain.json +13 -0
- package/registry/sticky-note-peel.json +14 -0
- package/registry/stretch-x-char.json +14 -0
- package/registry/stretch-y-char.json +14 -0
- package/registry/stroke-waveform.json +14 -0
- package/registry/submenu-flyout.json +14 -0
- package/registry/success-check.json +14 -0
- package/registry/sudden-brake.json +14 -0
- package/registry/swing-word.json +14 -0
- package/registry/textarea-auto-grow.json +14 -0
- package/registry/theme-toggle.json +14 -0
- package/registry/timer-preparation-segmented.json +14 -0
- package/registry/tracking-in-text.json +14 -0
- package/registry/tracking-out-text.json +14 -0
- package/registry/typewriter-text.json +13 -0
- package/registry/users-growth-pill-progress.json +14 -0
- package/registry/vertical-wheel-counter.json +14 -0
- package/registry/views-hourly-wave-chart.json +14 -0
- package/registry/wandering-eyes.json +11 -0
- package/registry/wave-reveal.json +13 -0
- package/registry/zoom-in-text.json +14 -0
- package/registry/zoom-out-text.json +14 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "hover-scale-char",
|
|
3
|
+
"file": "hover-scale-char.tsx",
|
|
4
|
+
"content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n const trigger = useCallback((type = \"light\") => {\n if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n return false;\n }\n try {\n switch (type) {\n case \"light\":\n return window.navigator.vibrate(10);\n case \"medium\":\n return window.navigator.vibrate(25);\n case \"heavy\":\n return window.navigator.vibrate(50);\n case \"success\":\n return window.navigator.vibrate([15, 60, 15]);\n case \"warning\":\n return window.navigator.vibrate([30, 60, 30]);\n case \"error\":\n return window.navigator.vibrate([60, 60, 60, 60, 60]);\n default:\n return window.navigator.vibrate(type);\n }\n } catch (e) {\n console.warn(\"Vibration API error:\", e);\n return false;\n }\n }, []);\n return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n const [keyIndex, setKeyIndex] = useState(0);\n const { trigger: triggerHaptic } = useWebHaptics();\n const isDark = theme === \"dark\";\n const replay = () => {\n triggerHaptic(\"light\");\n setKeyIndex((prev) => prev + 1);\n };\n const samplePhrase = \"MOVA UI\";\n const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n return /* @__PURE__ */ jsxs(\n \"div\",\n {\n onClick: replay,\n className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n title: \"Click to replay animation\",\n children: [\n /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n switch (config.interactionType) {\n /* --- FEATURED --- */\n case \"dia-text-reveal\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: \"DIA REVEAL\"\n }\n ) }, keyIndex);\n /* --- REVEALS --- */\n case \"blur-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"BLUR REVEAL\"\n },\n keyIndex\n );\n case \"shimmer-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n case \"typewriter-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { width: 0 },\n animate: { width: \"auto\" },\n transition: { duration: 1.2, ease: \"easeInOut\" },\n className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n children: \"TYPEWRITER\"\n }\n ) }, keyIndex);\n case \"reveal-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { clipPath: \"inset(0 100% 0 0)\" },\n animate: { clipPath: \"inset(0 0 0 0)\" },\n transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: \"CINEMATIC\"\n }\n ) }, keyIndex);\n case \"fade-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.3, delay: i * 0.05 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"fade-in-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.15 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"fade-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.8 },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"FADE IN TEXT\"\n },\n keyIndex\n );\n case \"blur-up-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n transition: { duration: 0.5, delay: i * 0.12 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"blur-up-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n /* --- SLIDE & DROP --- */\n case \"stagger-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: 20, opacity: 0 },\n animate: { y: 0, opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"slide-up-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"100%\" },\n animate: { y: 0 },\n transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"slide-up-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"100%\" },\n animate: { y: 0 },\n transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"slide-up-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { y: \"100%\" },\n animate: { y: 0 },\n transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"SLIDE UP TEXT\"\n }\n ) }, keyIndex);\n case \"slide-down-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"-100%\" },\n animate: { y: 0 },\n transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"slide-down-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"-100%\" },\n animate: { y: 0 },\n transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"slide-left-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { x: 40, opacity: 0 },\n animate: { x: 0, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"slide-right-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { x: -40, opacity: 0 },\n animate: { x: 0, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"drop-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: -50, opacity: 0 },\n animate: { y: 0, opacity: 1 },\n transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"rise-up-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: 30, opacity: 0, scale: 0.8 },\n animate: { y: 0, opacity: 1, scale: 1 },\n transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"bounce-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scale: 0, opacity: 0 },\n animate: { scale: [0, 1.3, 1], opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.05 },\n className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n /* --- SCALE & ZOOM --- */\n case \"scale-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scale: 0 },\n animate: { scale: 1 },\n transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"scale-in-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scale: 0.4, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.12 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"scale-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { scale: 0.5, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { type: \"spring\", stiffness: 400, damping: 25 },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"SCALE IN TEXT\"\n },\n keyIndex\n );\n case \"zoom-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { scale: 0.2, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n children: \"ZOOM IN\"\n },\n keyIndex\n );\n case \"zoom-out-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { scale: 1.8, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n children: \"ZOOM OUT\"\n },\n keyIndex\n );\n /* --- 3D & ROTATE --- */\n case \"flip-y-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotateY: 90, opacity: 0 },\n animate: { rotateY: 0, opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.05 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"flip-x-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotateX: 90, opacity: 0 },\n animate: { rotateX: 0, opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.05 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"rotate-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotate: -45, opacity: 0, scale: 0.5 },\n animate: { rotate: 0, opacity: 1, scale: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"swing-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotateX: -90, opacity: 0 },\n animate: { rotateX: 0, opacity: 1 },\n transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n children: word\n },\n i\n )) }, keyIndex);\n /* --- DISTORTION & SPACING --- */\n case \"stretch-x-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scaleX: 2.5, opacity: 0 },\n animate: { scaleX: 1, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"stretch-y-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scaleY: 2.5, opacity: 0 },\n animate: { scaleY: 1, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"skew-x-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { skewX: -30, opacity: 0 },\n animate: { skewX: 0, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"tracking-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { letterSpacing: \"0.6em\", opacity: 0 },\n animate: { letterSpacing: \"0.05em\", opacity: 1 },\n transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"TRACKING IN\"\n },\n keyIndex\n );\n case \"tracking-out-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n animate: { letterSpacing: \"0.1em\", opacity: 1 },\n transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"TRACKING OUT\"\n },\n keyIndex\n );\n /* --- HOVER & INTERACTIVE --- */\n case \"spring-text\":\n case \"hover-lift-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n transition: { type: \"spring\", stiffness: 500, damping: 15 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"hover-lift-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { y: -6, color: \"#3b82f6\" },\n transition: { type: \"spring\", stiffness: 400, damping: 18 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) });\n case \"hover-scale-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { scale: 1.4 },\n transition: { type: \"spring\", stiffness: 500, damping: 18 },\n className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"hover-scale-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { scale: 1.25 },\n transition: { type: \"spring\", stiffness: 400, damping: 20 },\n className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n children: word\n },\n i\n )) });\n /* --- CONTINUOUS --- */\n case \"float-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { y: [0, -6, 0] },\n transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"float-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { y: [0, -8, 0] },\n transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n children: word\n },\n i\n )) });\n case \"pulse-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { opacity: [0.3, 1, 0.3] },\n transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"pulse-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { opacity: [0.3, 1, 0.3] },\n transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n children: word\n },\n i\n )) });\n case \"glow-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n transition: { duration: 2, repeat: Infinity },\n className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n children: \"GLOW TEXT\"\n }\n );\n default:\n return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n }\n })() }),\n /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n ]\n }\n );\n};\n\n// hover-scale-char.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-hoverscale-char\", \"label\": \"Hover Scale Char\", \"interactionType\": \"hover-scale-char\", \"description\": \"Characters scale up on hover.\", \"cliCommand\": \"npx @mova-ui/react add hover-scale-char\", \"category\": \"Hover & Interactive\" } });\n}\nexport {\n MovaComponent as default\n};\n",
|
|
5
|
+
"dependencies": [
|
|
6
|
+
"lucide-react",
|
|
7
|
+
"motion"
|
|
8
|
+
],
|
|
9
|
+
"css": "",
|
|
10
|
+
"usage": "import MovaComponent from './hover-scale-char';\n\nexport default function Demo() {\n return <MovaComponent />;\n}",
|
|
11
|
+
"exports": [
|
|
12
|
+
"default"
|
|
13
|
+
]
|
|
14
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{
|
|
2
|
+
"id": "hover-scale-word",
|
|
3
|
+
"file": "hover-scale-word.tsx",
|
|
4
|
+
"content": "// @ts-nocheck -- Generated JavaScript bundle; edit the maintained catalog source to retain TypeScript types.\n\"use client\";\n// Mova catalog component. See LICENSE.mova and LICENSE.third-party.\n// src/components/text/AnimatedText.tsx\nimport { useState } from \"react\";\nimport { motion } from \"motion/react\";\nimport { RefreshCw } from \"lucide-react\";\n\n// src/hooks/useWebHaptics.ts\nimport { useCallback } from \"react\";\nfunction useWebHaptics() {\n const trigger = useCallback((type = \"light\") => {\n if (typeof window === \"undefined\" || !window.navigator || !window.navigator.vibrate) {\n return false;\n }\n try {\n switch (type) {\n case \"light\":\n return window.navigator.vibrate(10);\n case \"medium\":\n return window.navigator.vibrate(25);\n case \"heavy\":\n return window.navigator.vibrate(50);\n case \"success\":\n return window.navigator.vibrate([15, 60, 15]);\n case \"warning\":\n return window.navigator.vibrate([30, 60, 30]);\n case \"error\":\n return window.navigator.vibrate([60, 60, 60, 60, 60]);\n default:\n return window.navigator.vibrate(type);\n }\n } catch (e) {\n console.warn(\"Vibration API error:\", e);\n return false;\n }\n }, []);\n return { trigger };\n}\n\n// src/components/text/AnimatedText.tsx\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nvar AnimatedText = ({ config, theme }) => {\n const [keyIndex, setKeyIndex] = useState(0);\n const { trigger: triggerHaptic } = useWebHaptics();\n const isDark = theme === \"dark\";\n const replay = () => {\n triggerHaptic(\"light\");\n setKeyIndex((prev) => prev + 1);\n };\n const samplePhrase = \"MOVA UI\";\n const sampleWords = [\"Design\", \"Motion\", \"Mova\"];\n return /* @__PURE__ */ jsxs(\n \"div\",\n {\n onClick: replay,\n className: \"relative flex flex-col items-center justify-center w-full h-full cursor-pointer select-none px-4 group\",\n title: \"Click to replay animation\",\n children: [\n /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center justify-center w-full min-h-[60px] text-center\", children: (() => {\n switch (config.interactionType) {\n /* --- FEATURED --- */\n case \"dia-text-reveal\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-black text-2xl tracking-tighter\", children: /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { clipPath: \"polygon(0 0, 0 0, 0 100%, 0% 100%)\", filter: \"blur(8px)\" },\n animate: { clipPath: \"polygon(0 0, 100% 0, 100% 100%, 0 100%)\", filter: \"blur(0px)\" },\n transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: \"DIA REVEAL\"\n }\n ) }, keyIndex);\n /* --- REVEALS --- */\n case \"blur-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { filter: \"blur(12px)\", opacity: 0, scale: 0.9 },\n animate: { filter: \"blur(0px)\", opacity: 1, scale: 1 },\n transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"BLUR REVEAL\"\n },\n keyIndex\n );\n case \"shimmer-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: `font-extrabold text-2xl bg-gradient-to-r ${isDark ? \"from-neutral-400 via-white to-neutral-400\" : \"from-neutral-600 via-black to-neutral-600\"} bg-clip-text text-transparent animate-pulse`, children: \"SHIMMER TEXT\" });\n case \"typewriter-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex items-center font-mono text-lg font-bold\", children: /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { width: 0 },\n animate: { width: \"auto\" },\n transition: { duration: 1.2, ease: \"easeInOut\" },\n className: `overflow-hidden whitespace-nowrap border-r-2 ${isDark ? \"text-emerald-400 border-emerald-400\" : \"text-emerald-600 border-emerald-600\"}`,\n children: \"TYPEWRITER\"\n }\n ) }, keyIndex);\n case \"reveal-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"relative overflow-hidden font-bold text-2xl\", children: /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { clipPath: \"inset(0 100% 0 0)\" },\n animate: { clipPath: \"inset(0 0 0 0)\" },\n transition: { duration: 0.75, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: \"CINEMATIC\"\n }\n ) }, keyIndex);\n case \"fade-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.3, delay: i * 0.05 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"fade-in-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.15 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"fade-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.8 },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"FADE IN TEXT\"\n },\n keyIndex\n );\n case \"blur-up-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n transition: { duration: 0.5, delay: i * 0.12 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"blur-up-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { opacity: 0, y: 15, filter: \"blur(8px)\" },\n animate: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n /* --- SLIDE & DROP --- */\n case \"stagger-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: 20, opacity: 0 },\n animate: { y: 0, opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"slide-up-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"100%\" },\n animate: { y: 0 },\n transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"slide-up-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"100%\" },\n animate: { y: 0 },\n transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"slide-up-text\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"overflow-hidden\", children: /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { y: \"100%\" },\n animate: { y: 0 },\n transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"SLIDE UP TEXT\"\n }\n ) }, keyIndex);\n case \"slide-down-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"-100%\" },\n animate: { y: 0 },\n transition: { duration: 0.4, delay: i * 0.04, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"slide-down-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 overflow-hidden font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: \"-100%\" },\n animate: { y: 0 },\n transition: { duration: 0.5, delay: i * 0.1, ease: [0.16, 1, 0.3, 1] },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"slide-left-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { x: 40, opacity: 0 },\n animate: { x: 0, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"slide-right-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex overflow-hidden font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { x: -40, opacity: 0 },\n animate: { x: 0, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"drop-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: -50, opacity: 0 },\n animate: { y: 0, opacity: 1 },\n transition: { type: \"spring\", stiffness: 500, damping: 25, delay: i * 0.04 },\n className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"rise-up-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { y: 30, opacity: 0, scale: 0.8 },\n animate: { y: 0, opacity: 1, scale: 1 },\n transition: { type: \"spring\", stiffness: 400, damping: 22, delay: i * 0.12 },\n className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"bounce-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scale: 0, opacity: 0 },\n animate: { scale: [0, 1.3, 1], opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.05 },\n className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n /* --- SCALE & ZOOM --- */\n case \"scale-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scale: 0 },\n animate: { scale: 1 },\n transition: { type: \"spring\", stiffness: 450, damping: 22, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"scale-in-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scale: 0.4, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.12 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) }, keyIndex);\n case \"scale-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { scale: 0.5, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { type: \"spring\", stiffness: 400, damping: 25 },\n className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"SCALE IN TEXT\"\n },\n keyIndex\n );\n case \"zoom-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { scale: 0.2, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n children: \"ZOOM IN\"\n },\n keyIndex\n );\n case \"zoom-out-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { scale: 1.8, opacity: 0 },\n animate: { scale: 1, opacity: 1 },\n transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },\n className: `font-extrabold text-2xl ${isDark ? \"text-amber-400\" : \"text-amber-600\"}`,\n children: \"ZOOM OUT\"\n },\n keyIndex\n );\n /* --- 3D & ROTATE --- */\n case \"flip-y-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotateY: 90, opacity: 0 },\n animate: { rotateY: 0, opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.05 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"flip-x-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl [perspective:1000px]\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotateX: 90, opacity: 0 },\n animate: { rotateX: 0, opacity: 1 },\n transition: { duration: 0.5, delay: i * 0.05 },\n className: isDark ? \"text-indigo-400\" : \"text-indigo-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"rotate-in-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotate: -45, opacity: 0, scale: 0.5 },\n animate: { rotate: 0, opacity: 1, scale: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"swing-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl [perspective:800px]\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { rotateX: -90, opacity: 0 },\n animate: { rotateX: 0, opacity: 1 },\n transition: { type: \"spring\", stiffness: 350, damping: 18, delay: i * 0.12 },\n className: isDark ? \"text-purple-400\" : \"text-purple-600\",\n children: word\n },\n i\n )) }, keyIndex);\n /* --- DISTORTION & SPACING --- */\n case \"stretch-x-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scaleX: 2.5, opacity: 0 },\n animate: { scaleX: 1, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"stretch-y-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { scaleY: 2.5, opacity: 0 },\n animate: { scaleY: 1, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"skew-x-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n initial: { skewX: -30, opacity: 0 },\n animate: { skewX: 0, opacity: 1 },\n transition: { duration: 0.4, delay: i * 0.04 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) }, keyIndex);\n case \"tracking-in-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { letterSpacing: \"0.6em\", opacity: 0 },\n animate: { letterSpacing: \"0.05em\", opacity: 1 },\n transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"TRACKING IN\"\n },\n keyIndex\n );\n case \"tracking-out-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n initial: { letterSpacing: \"-0.2em\", opacity: 0 },\n animate: { letterSpacing: \"0.1em\", opacity: 1 },\n transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] },\n className: `font-black text-xl uppercase ${isDark ? \"text-white\" : \"text-black\"}`,\n children: \"TRACKING OUT\"\n },\n keyIndex\n );\n /* --- HOVER & INTERACTIVE --- */\n case \"spring-text\":\n case \"hover-lift-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { y: -8, scale: 1.2, color: \"#6366f1\" },\n transition: { type: \"spring\", stiffness: 500, damping: 15 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"hover-lift-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { y: -6, color: \"#3b82f6\" },\n transition: { type: \"spring\", stiffness: 400, damping: 18 },\n className: isDark ? \"text-white\" : \"text-black\",\n children: word\n },\n i\n )) });\n case \"hover-scale-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl cursor-pointer\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { scale: 1.4 },\n transition: { type: \"spring\", stiffness: 500, damping: 18 },\n className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"hover-scale-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl cursor-pointer\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n whileHover: { scale: 1.25 },\n transition: { type: \"spring\", stiffness: 400, damping: 20 },\n className: isDark ? \"text-pink-400\" : \"text-pink-600\",\n children: word\n },\n i\n )) });\n /* --- CONTINUOUS --- */\n case \"float-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { y: [0, -6, 0] },\n transition: { duration: 2, repeat: Infinity, delay: i * 0.1, ease: \"easeInOut\" },\n className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"float-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { y: [0, -8, 0] },\n transition: { duration: 2.4, repeat: Infinity, delay: i * 0.2, ease: \"easeInOut\" },\n className: isDark ? \"text-cyan-400\" : \"text-cyan-600\",\n children: word\n },\n i\n )) });\n case \"pulse-char\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex font-bold text-2xl\", children: samplePhrase.split(\"\").map((char, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { opacity: [0.3, 1, 0.3] },\n transition: { duration: 1.5, repeat: Infinity, delay: i * 0.08 },\n className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n children: char === \" \" ? \"\\xA0\" : char\n },\n i\n )) });\n case \"pulse-word\":\n return /* @__PURE__ */ jsx(\"div\", { className: \"flex gap-2 font-bold text-xl\", children: sampleWords.map((word, i) => /* @__PURE__ */ jsx(\n motion.span,\n {\n animate: { opacity: [0.3, 1, 0.3] },\n transition: { duration: 1.8, repeat: Infinity, delay: i * 0.25 },\n className: isDark ? \"text-emerald-400\" : \"text-emerald-600\",\n children: word\n },\n i\n )) });\n case \"glow-text\":\n return /* @__PURE__ */ jsx(\n motion.div,\n {\n animate: { textShadow: isDark ? [\"0 0 10px rgba(99,102,241,0.5)\", \"0 0 25px rgba(99,102,241,0.9)\", \"0 0 10px rgba(99,102,241,0.5)\"] : [\"0 0 10px rgba(79,70,229,0.3)\", \"0 0 20px rgba(79,70,229,0.6)\", \"0 0 10px rgba(79,70,229,0.3)\"] },\n transition: { duration: 2, repeat: Infinity },\n className: `font-black text-3xl tracking-tight ${isDark ? \"text-indigo-300\" : \"text-indigo-600\"}`,\n children: \"GLOW TEXT\"\n }\n );\n default:\n return /* @__PURE__ */ jsx(\"div\", { className: `font-bold text-2xl ${isDark ? \"text-white\" : \"text-black\"}`, children: config.label });\n }\n })() }),\n /* @__PURE__ */ jsx(\"div\", { className: \"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-full bg-black/20 text-white/70\", children: /* @__PURE__ */ jsx(RefreshCw, { className: \"w-3.5 h-3.5\" }) })\n ]\n }\n );\n};\n\n// hover-scale-word.tsx\nimport { jsx as jsx2 } from \"react/jsx-runtime\";\nfunction MovaComponent({ theme = \"dark\" }) {\n return /* @__PURE__ */ jsx2(AnimatedText, { theme, config: { \"id\": \"txt-hoverscale-word\", \"label\": \"Hover Scale Word\", \"interactionType\": \"hover-scale-word\", \"description\": \"Words scale up on hover.\", \"cliCommand\": \"npx @mova-ui/react add hover-scale-word\", \"category\": \"Hover & Interactive\" } });\n}\nexport {\n MovaComponent as default\n};\n",
|
|
5
|
+
"dependencies": [
|
|
6
|
+
"lucide-react",
|
|
7
|
+
"motion"
|
|
8
|
+
],
|
|
9
|
+
"css": "",
|
|
10
|
+
"usage": "import MovaComponent from './hover-scale-word';\n\nexport default function Demo() {\n return <MovaComponent />;\n}",
|
|
11
|
+
"exports": [
|
|
12
|
+
"default"
|
|
13
|
+
]
|
|
14
|
+
}
|