@smicolon/fasla-ui 0.2.2

package/registry/effects/glow-card/glow-card.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+export interface GlowCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Glow color (any CSS color) */
+  glowColor?: string
+  /** Glow intensity (blur radius in pixels) */
+  glowIntensity?: number
+  /** Whether glow follows mouse */
+  followMouse?: boolean
+  /** Whether to show glow on hover only */
+  hoverOnly?: boolean
+  children: React.ReactNode
+}
+
+export function GlowCard({
+  glowColor = "hsl(var(--primary))",
+  glowIntensity = 60,
+  followMouse = false,
+  hoverOnly = true,
+  className,
+  children,
+  ...props
+}: GlowCardProps) {
+  const cardRef = React.useRef<HTMLDivElement>(null)
+  const [mousePosition, setMousePosition] = React.useState({ x: 50, y: 50 })
+  const [isHovering, setIsHovering] = React.useState(false)
+
+  // Check for reduced motion preference
+  const prefersReducedMotion = React.useMemo(() => {
+    if (typeof window === "undefined") return false
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  }, [])
+
+  const handleMouseMove = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!followMouse || !cardRef.current || prefersReducedMotion) return
+
+      const rect = cardRef.current.getBoundingClientRect()
+      const x = ((e.clientX - rect.left) / rect.width) * 100
+      const y = ((e.clientY - rect.top) / rect.height) * 100
+      setMousePosition({ x, y })
+    },
+    [followMouse, prefersReducedMotion]
+  )
+
+  const showGlow = prefersReducedMotion ? false : hoverOnly ? isHovering : true
+
+  return (
+    <div
+      ref={cardRef}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      className={cn("relative overflow-hidden rounded-xl", className)}
+      {...props}
+    >
+      {/* Glow effect */}
+      <div
+        className={cn(
+          "pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300",
+          showGlow && "opacity-100"
+        )}
+        style={{
+          background: followMouse
+            ? `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, ${glowColor}, transparent 70%)`
+            : `radial-gradient(circle at 50% 50%, ${glowColor}, transparent 70%)`,
+          filter: `blur(${glowIntensity}px)`,
+        }}
+      />
+
+      {/* Border glow */}
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-0 rounded-xl opacity-0 transition-opacity duration-300",
+          showGlow && "opacity-50"
+        )}
+        style={{
+          background: followMouse
+            ? `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, ${glowColor}, transparent 50%)`
+            : undefined,
+          padding: "1px",
+          WebkitMask:
+            "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+          WebkitMaskComposite: "xor",
+          maskComposite: "exclude",
+        }}
+      />
+
+      {/* Card content */}
+      <div className="relative z-10 rounded-xl border bg-card">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export interface GlowContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Glow color */
+  glowColor?: string
+  /** Animation duration in seconds */
+  duration?: number
+  children: React.ReactNode
+}
+
+export function GlowContainer({
+  glowColor = "hsl(var(--primary))",
+  duration = 3,
+  className,
+  children,
+  ...props
+}: GlowContainerProps) {
+  const prefersReducedMotion = React.useMemo(() => {
+    if (typeof window === "undefined") return false
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  }, [])
+
+  return (
+    <div
+      className={cn("relative overflow-hidden rounded-xl p-px", className)}
+      style={
+        !prefersReducedMotion
+          ? {
+              background: `linear-gradient(90deg, ${glowColor}, transparent, ${glowColor})`,
+              backgroundSize: "200% 100%",
+              animation: `glow-slide ${duration}s linear infinite`,
+            }
+          : { background: glowColor }
+      }
+      {...props}
+    >
+      <style dangerouslySetInnerHTML={{ __html: `
+        @keyframes glow-slide {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      ` }} />
+      <div className="relative z-10 rounded-[11px] bg-background">
+        {children}
+      </div>
+    </div>
+  )
+}

package/registry/effects/glow-card/index.ts

@@ -0,0 +1,6 @@
+export {
+  GlowCard,
+  GlowContainer,
+  type GlowCardProps,
+  type GlowContainerProps,
+} from "./glow-card"

package/registry/effects/shimmer-button/index.ts

@@ -0,0 +1 @@
+export { ShimmerButton, type ShimmerButtonProps } from "./shimmer-button"

package/registry/effects/shimmer-button/shimmer-button.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { useReducedMotion } from "framer-motion"
+import { cn } from "../../../src/lib/utils"
+
+export interface ShimmerButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Shimmer color */
+  shimmerColor?: string
+  /** Shimmer size in pixels */
+  shimmerSize?: string
+  /** Border radius */
+  borderRadius?: string
+  /** Shimmer duration in seconds */
+  shimmerDuration?: string
+  /** Background color */
+  background?: string
+}
+
+/**
+ * A button with an animated shimmer effect.
+ * The shimmer respects prefers-reduced-motion.
+ */
+export const ShimmerButton = React.forwardRef<
+  HTMLButtonElement,
+  ShimmerButtonProps
+>(
+  (
+    {
+      shimmerColor = "hsl(var(--primary) / 0.2)",
+      shimmerSize = "0.1em",
+      shimmerDuration = "2s",
+      borderRadius = "0.5rem",
+      background = "hsl(var(--primary))",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const prefersReducedMotion = useReducedMotion()
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "group relative inline-flex h-10 items-center justify-center overflow-hidden whitespace-nowrap px-6 py-2 text-sm font-medium text-primary-foreground transition-all hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          className
+        )}
+        style={
+          {
+            "--shimmer-color": shimmerColor,
+            "--shimmer-size": shimmerSize,
+            "--shimmer-duration": shimmerDuration,
+            "--border-radius": borderRadius,
+            "--background": background,
+            borderRadius: "var(--border-radius)",
+            background: "var(--background)",
+          } as React.CSSProperties
+        }
+        {...props}
+      >
+        {/* Shimmer effect */}
+        {!prefersReducedMotion && (
+          <div
+            className="absolute inset-0 overflow-hidden"
+            style={{ borderRadius: "var(--border-radius)" }}
+          >
+            <div
+              className="animate-shimmer absolute inset-0 -translate-x-full"
+              style={{
+                background: `linear-gradient(
+                  90deg,
+                  transparent 0%,
+                  var(--shimmer-color) 50%,
+                  transparent 100%
+                )`,
+                animationDuration: "var(--shimmer-duration)",
+              }}
+            />
+          </div>
+        )}
+
+        {/* Content */}
+        <span className="relative z-10 flex items-center gap-2">{children}</span>
+      </button>
+    )
+  }
+)
+ShimmerButton.displayName = "ShimmerButton"

package/registry/effects/spotlight/index.ts

@@ -0,0 +1,6 @@
+export {
+  Spotlight,
+  SpotlightCard,
+  type SpotlightProps,
+  type SpotlightCardProps,
+} from "./spotlight"

package/registry/effects/spotlight/spotlight.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from "react"
+import { motion, useMotionValue, useSpring, useReducedMotion } from "framer-motion"
+import { cn } from "../../../src/lib/utils"
+
+export interface SpotlightProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Spotlight color */
+  color?: string
+  /** Spotlight size in pixels */
+  size?: number
+  /** Spotlight blur in pixels */
+  blur?: number
+  /** Opacity of the spotlight */
+  opacity?: number
+}
+
+/**
+ * Cursor-following spotlight effect.
+ * Respects prefers-reduced-motion by disabling the effect.
+ */
+export function Spotlight({
+  color = "hsl(var(--primary) / 0.15)",
+  size = 400,
+  blur = 80,
+  opacity = 1,
+  className,
+  children,
+  ...props
+}: SpotlightProps) {
+  const prefersReducedMotion = useReducedMotion()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  const mouseX = useMotionValue(0)
+  const mouseY = useMotionValue(0)
+
+  const springConfig = { damping: 25, stiffness: 200 }
+  const springX = useSpring(mouseX, springConfig)
+  const springY = useSpring(mouseY, springConfig)
+
+  const handleMouseMove = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!containerRef.current || prefersReducedMotion) return
+
+      const rect = containerRef.current.getBoundingClientRect()
+      const x = e.clientX - rect.left - size / 2
+      const y = e.clientY - rect.top - size / 2
+
+      mouseX.set(x)
+      mouseY.set(y)
+    },
+    [mouseX, mouseY, size, prefersReducedMotion]
+  )
+
+  if (prefersReducedMotion) {
+    return (
+      <div className={cn("relative", className)} {...props}>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseMove={handleMouseMove}
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      {/* Spotlight */}
+      <motion.div
+        className="pointer-events-none absolute -z-10 rounded-full"
+        style={{
+          x: springX,
+          y: springY,
+          width: size,
+          height: size,
+          background: `radial-gradient(circle, ${color} 0%, transparent 70%)`,
+          filter: `blur(${blur}px)`,
+          opacity,
+        }}
+      />
+
+      {/* Content */}
+      {children}
+    </div>
+  )
+}
+
+export interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Spotlight color */
+  spotlightColor?: string
+  /** Spotlight size */
+  spotlightSize?: number
+}
+
+/**
+ * Card with spotlight effect on hover.
+ */
+export function SpotlightCard({
+  spotlightColor = "hsl(var(--primary) / 0.1)",
+  spotlightSize = 300,
+  className,
+  children,
+  ...props
+}: SpotlightCardProps) {
+  const prefersReducedMotion = useReducedMotion()
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const [isHovered, setIsHovered] = React.useState(false)
+
+  const mouseX = useMotionValue(0)
+  const mouseY = useMotionValue(0)
+
+  const handleMouseMove = React.useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!containerRef.current || prefersReducedMotion) return
+
+      const rect = containerRef.current.getBoundingClientRect()
+      const x = e.clientX - rect.left
+      const y = e.clientY - rect.top
+
+      mouseX.set(x)
+      mouseY.set(y)
+    },
+    [mouseX, mouseY, prefersReducedMotion]
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={cn(
+        "relative overflow-hidden rounded-xl border bg-card p-6 shadow",
+        className
+      )}
+      {...props}
+    >
+      {/* Spotlight */}
+      {!prefersReducedMotion && isHovered && (
+        <motion.div
+          className="pointer-events-none absolute -z-10 rounded-full"
+          style={{
+            x: mouseX,
+            y: mouseY,
+            width: spotlightSize,
+            height: spotlightSize,
+            background: `radial-gradient(circle, ${spotlightColor} 0%, transparent 70%)`,
+            transform: "translate(-50%, -50%)",
+          }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        />
+      )}
+
+      {/* Content */}
+      {children}
+    </div>
+  )
+}

package/registry/effects/text-reveal/index.ts

@@ -0,0 +1,6 @@
+export {
+  TextReveal,
+  WordReveal,
+  type TextRevealProps,
+  type WordRevealProps,
+} from "./text-reveal"

package/registry/effects/text-reveal/text-reveal.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { motion, useReducedMotion, useInView } from "framer-motion"
+import { cn } from "../../../src/lib/utils"
+
+export interface TextRevealProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Text to reveal */
+  text: string
+  /** Delay between each character in seconds */
+  delay?: number
+  /** Duration of each character animation */
+  duration?: number
+  /** Whether to trigger on view */
+  triggerOnView?: boolean
+}
+
+/**
+ * Text reveal animation that reveals text character by character.
+ * Respects prefers-reduced-motion by showing text immediately.
+ */
+export function TextReveal({
+  text,
+  delay = 0.03,
+  duration = 0.3,
+  triggerOnView = true,
+  className,
+  ...props
+}: TextRevealProps) {
+  const prefersReducedMotion = useReducedMotion()
+  const ref = React.useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, amount: 0.5 })
+
+  const shouldAnimate = triggerOnView ? isInView : true
+  const characters = text.split("")
+
+  if (prefersReducedMotion) {
+    return (
+      <div className={className} {...props}>
+        {text}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn("inline-block", className)}
+      {...props}
+    >
+      {characters.map((char, i) => (
+        <motion.span
+          key={`${char}-${i}`}
+          className="inline-block"
+          initial={{ opacity: 0, y: 10 }}
+          animate={
+            shouldAnimate
+              ? { opacity: 1, y: 0 }
+              : { opacity: 0, y: 10 }
+          }
+          transition={{
+            duration,
+            delay: i * delay,
+            ease: [0.2, 0.65, 0.3, 0.9],
+          }}
+        >
+          {char === " " ? "\u00A0" : char}
+        </motion.span>
+      ))}
+    </div>
+  )
+}
+
+export interface WordRevealProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Text to reveal */
+  text: string
+  /** Delay between each word in seconds */
+  delay?: number
+  /** Duration of each word animation */
+  duration?: number
+  /** Whether to trigger on view */
+  triggerOnView?: boolean
+}
+
+/**
+ * Word-by-word reveal animation.
+ */
+export function WordReveal({
+  text,
+  delay = 0.1,
+  duration = 0.4,
+  triggerOnView = true,
+  className,
+  ...props
+}: WordRevealProps) {
+  const prefersReducedMotion = useReducedMotion()
+  const ref = React.useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once: true, amount: 0.5 })
+
+  const shouldAnimate = triggerOnView ? isInView : true
+  const words = text.split(" ")
+
+  if (prefersReducedMotion) {
+    return (
+      <div className={className} {...props}>
+        {text}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn("inline-block", className)}
+      {...props}
+    >
+      {words.map((word, i) => (
+        <motion.span
+          key={`${word}-${i}`}
+          className="inline-block"
+          initial={{ opacity: 0, y: 20, filter: "blur(10px)" }}
+          animate={
+            shouldAnimate
+              ? { opacity: 1, y: 0, filter: "blur(0px)" }
+              : { opacity: 0, y: 20, filter: "blur(10px)" }
+          }
+          transition={{
+            duration,
+            delay: i * delay,
+            ease: [0.2, 0.65, 0.3, 0.9],
+          }}
+        >
+          {word}
+          {i < words.length - 1 && "\u00A0"}
+        </motion.span>
+      ))}
+    </div>
+  )
+}

package/registry/effects/typewriter-text/index.ts

@@ -0,0 +1,6 @@
+export {
+  TypewriterText,
+  TypewriterWords,
+  type TypewriterTextProps,
+  type TypewriterWordsProps,
+} from "./typewriter-text"