@oalacea/chaosui 0.4.0 → 0.5.1

package/text/reveal-text/css/index.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+import styles from './reveal-text.module.css';
+
+export interface RevealTextProps extends HTMLAttributes<HTMLDivElement> {
+  /** Text to reveal */
+  children: string;
+  /** Split mode */
+  splitBy?: 'word' | 'char' | 'line';
+  /** Reveal direction */
+  direction?: 'fromBottom' | 'fromTop' | 'fromLeft' | 'fromRight';
+  /** Additional effect */
+  effect?: 'none' | 'blur' | 'scale' | 'rotate';
+  /** Stagger delay between elements in ms */
+  stagger?: number;
+  /** Animation speed */
+  speed?: 'fast' | 'normal' | 'slow';
+  /** Trigger threshold (0-1) */
+  threshold?: number;
+  /** Only animate once */
+  once?: boolean;
+  /** Show highlight underline */
+  highlight?: boolean;
+  /** Highlight color */
+  highlightColor?: string;
+  /** Trigger immediately without scroll */
+  immediate?: boolean;
+}
+
+export const RevealText = forwardRef<HTMLDivElement, RevealTextProps>(
+  (
+    {
+      children,
+      splitBy = 'word',
+      direction = 'fromBottom',
+      effect = 'none',
+      stagger = 50,
+      speed = 'normal',
+      threshold = 0.2,
+      once = true,
+      highlight = false,
+      highlightColor = '#ff0040',
+      immediate = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [visibleIndices, setVisibleIndices] = useState<Set<number>>(new Set());
+    const containerRef = useRef<HTMLDivElement>(null);
+    const hasAnimated = useRef(false);
+
+    const elements = splitBy === 'line' 
+      ? children.split('\n') 
+      : splitBy === 'char' 
+        ? children.split('') 
+        : children.split(' ');
+
+    useEffect(() => {
+      if (immediate) {
+        elements.forEach((_, i) => {
+          setTimeout(() => {
+            setVisibleIndices(prev => new Set(prev).add(i));
+          }, i * stagger);
+        });
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting && (!once || !hasAnimated.current)) {
+            hasAnimated.current = true;
+            elements.forEach((_, i) => {
+              setTimeout(() => {
+                setVisibleIndices(prev => new Set(prev).add(i));
+              }, i * stagger);
+            });
+          } else if (!entry.isIntersecting && !once) {
+            setVisibleIndices(new Set());
+          }
+        },
+        { threshold }
+      );
+
+      if (containerRef.current) {
+        observer.observe(containerRef.current);
+      }
+
+      return () => observer.disconnect();
+    }, [elements, stagger, threshold, once, immediate]);
+
+    const containerClasses = [
+      styles.container,
+      styles[speed],
+      className
+    ].filter(Boolean).join(' ');
+
+    const renderWord = (word: string, index: number) => {
+      const isVisible = visibleIndices.has(index);
+      const wordClasses = [
+        styles.word,
+        styles[direction],
+        effect !== 'none' && styles[effect],
+        isVisible && styles.visible,
+        highlight && styles.highlight
+      ].filter(Boolean).join(' ');
+
+      return (
+        <span
+          key={index}
+          className={wordClasses}
+          style={{ 
+            transitionDelay: `${index * stagger}ms`,
+            '--highlight-color': highlightColor
+          } as React.CSSProperties}
+        >
+          <span className={styles.wordInner}>{word}</span>
+        </span>
+      );
+    };
+
+    const renderChar = (char: string, index: number) => {
+      const isVisible = visibleIndices.has(index);
+      return (
+        <span
+          key={index}
+          className={`${styles.char} ${isVisible ? styles.visible : ''}`}
+          style={{ transitionDelay: `${index * stagger}ms` }}
+        >
+          {char === ' ' ? '\u00A0' : char}
+        </span>
+      );
+    };
+
+    const renderLine = (line: string, index: number) => {
+      const isVisible = visibleIndices.has(index);
+      const lineClasses = [
+        styles.line,
+        styles[direction],
+        isVisible && styles.visible
+      ].filter(Boolean).join(' ');
+
+      return (
+        <span
+          key={index}
+          className={lineClasses}
+          style={{ transitionDelay: `${index * stagger}ms` }}
+        >
+          <span className={styles.lineInner}>{line}</span>
+        </span>
+      );
+    };
+
+    return (
+      <div
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={containerClasses}
+        style={style}
+        {...props}
+      >
+        {elements.map((el, i) => 
+          splitBy === 'line' 
+            ? renderLine(el, i)
+            : splitBy === 'char' 
+              ? renderChar(el, i)
+              : renderWord(el, i)
+        )}
+      </div>
+    );
+  }
+);
+
+RevealText.displayName = 'RevealText';
+export default RevealText;

package/text/reveal-text/css/reveal-text.module.css

@@ -0,0 +1,129 @@
+.container {
+  position: relative;
+  display: block;
+}
+
+.word {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  margin-right: 0.25em;
+}
+
+.wordInner {
+  display: inline-block;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
+}
+
+.word.visible .wordInner {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Direction variants */
+.fromBottom .wordInner { transform: translateY(100%); }
+.fromTop .wordInner { transform: translateY(-100%); }
+.fromLeft .wordInner { transform: translateX(-100%); }
+.fromRight .wordInner { transform: translateX(100%); }
+
+.fromBottom.visible .wordInner,
+.fromTop.visible .wordInner { transform: translateY(0); }
+.fromLeft.visible .wordInner,
+.fromRight.visible .wordInner { transform: translateX(0); }
+
+/* Blur variant */
+.blur .wordInner {
+  filter: blur(10px);
+}
+
+.blur.visible .wordInner {
+  filter: blur(0);
+}
+
+/* Scale variant */
+.scale .wordInner {
+  transform: translateY(100%) scale(0.8);
+}
+
+.scale.visible .wordInner {
+  transform: translateY(0) scale(1);
+}
+
+/* Rotate variant */
+.rotate .wordInner {
+  transform: translateY(100%) rotateX(90deg);
+  transform-origin: bottom;
+}
+
+.rotate.visible .wordInner {
+  transform: translateY(0) rotateX(0deg);
+}
+
+/* Split char mode */
+.char {
+  display: inline-block;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
+}
+
+.char.visible {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Line mode */
+.line {
+  display: block;
+  overflow: hidden;
+  margin-bottom: 0.1em;
+}
+
+.lineInner {
+  display: block;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease;
+}
+
+.line.visible .lineInner {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+/* Highlight effect */
+.highlight {
+  position: relative;
+}
+
+.highlight::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  height: 30%;
+  background: var(--highlight-color, #ff0040);
+  opacity: 0.3;
+  z-index: -1;
+  transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
+}
+
+.highlight.visible::after {
+  width: 100%;
+}
+
+/* Speed variants */
+.fast .wordInner,
+.fast .char,
+.fast .lineInner {
+  transition-duration: 0.3s;
+}
+
+.slow .wordInner,
+.slow .char,
+.slow .lineInner {
+  transition-duration: 1s;
+}

package/text/reveal-text/tailwind/index.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef } from 'react';
+
+export interface RevealTextProps extends HTMLAttributes<HTMLDivElement> {
+  children: string;
+  splitBy?: 'word' | 'char' | 'line';
+  direction?: 'fromBottom' | 'fromTop' | 'fromLeft' | 'fromRight';
+  effect?: 'none' | 'blur' | 'scale' | 'rotate';
+  stagger?: number;
+  speed?: 'fast' | 'normal' | 'slow';
+  threshold?: number;
+  once?: boolean;
+  highlight?: boolean;
+  highlightColor?: string;
+  immediate?: boolean;
+}
+
+const speedDurations = { fast: 'duration-300', normal: 'duration-500', slow: 'duration-1000' };
+
+const hiddenTransforms = {
+  fromBottom: 'translate-y-full',
+  fromTop: '-translate-y-full',
+  fromLeft: '-translate-x-full',
+  fromRight: 'translate-x-full',
+};
+
+export const RevealText = forwardRef<HTMLDivElement, RevealTextProps>(
+  (
+    {
+      children,
+      splitBy = 'word',
+      direction = 'fromBottom',
+      effect = 'none',
+      stagger = 50,
+      speed = 'normal',
+      threshold = 0.2,
+      once = true,
+      highlight = false,
+      highlightColor = '#ff0040',
+      immediate = false,
+      className = '',
+      ...props
+    },
+    ref
+  ) => {
+    const [visibleIndices, setVisibleIndices] = useState<Set<number>>(new Set());
+    const containerRef = useRef<HTMLDivElement>(null);
+    const hasAnimated = useRef(false);
+
+    const elements = splitBy === 'line' 
+      ? children.split('\n') 
+      : splitBy === 'char' 
+        ? children.split('') 
+        : children.split(' ');
+
+    useEffect(() => {
+      if (immediate) {
+        elements.forEach((_, i) => {
+          setTimeout(() => {
+            setVisibleIndices(prev => new Set(prev).add(i));
+          }, i * stagger);
+        });
+        return;
+      }
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting && (!once || !hasAnimated.current)) {
+            hasAnimated.current = true;
+            elements.forEach((_, i) => {
+              setTimeout(() => {
+                setVisibleIndices(prev => new Set(prev).add(i));
+              }, i * stagger);
+            });
+          } else if (!entry.isIntersecting && !once) {
+            setVisibleIndices(new Set());
+          }
+        },
+        { threshold }
+      );
+
+      if (containerRef.current) observer.observe(containerRef.current);
+      return () => observer.disconnect();
+    }, [elements, stagger, threshold, once, immediate]);
+
+    const renderElement = (text: string, index: number) => {
+      const isVisible = visibleIndices.has(index);
+      const duration = speedDurations[speed];
+      
+      const baseClasses = `inline-block overflow-hidden ${splitBy === 'line' ? 'block mb-1' : 'mr-1'}`;
+      const innerBase = `inline-block transition-all ease-out ${duration}`;
+      const hiddenState = `${hiddenTransforms[direction]} opacity-0 ${effect === 'blur' ? 'blur-sm' : ''} ${effect === 'scale' ? 'scale-75' : ''}`;
+      const visibleState = 'translate-y-0 translate-x-0 opacity-100 blur-0 scale-100';
+
+      return (
+        <span key={index} className={`${baseClasses} ${highlight ? 'relative' : ''}`}>
+          <span
+            className={`${innerBase} ${isVisible ? visibleState : hiddenState}`}
+            style={{ transitionDelay: `${index * stagger}ms` }}
+          >
+            {text === ' ' ? '\u00A0' : text}
+          </span>
+          {highlight && (
+            <span
+              className={`absolute bottom-0 left-0 h-[30%] -z-10 transition-all ${duration} opacity-30`}
+              style={{
+                backgroundColor: highlightColor,
+                width: isVisible ? '100%' : '0%',
+                transitionDelay: `${index * stagger + 200}ms`,
+              }}
+            />
+          )}
+        </span>
+      );
+    };
+
+    return (
+      <div
+        ref={(node) => {
+          (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={`relative ${className}`}
+        {...props}
+      >
+        {elements.map(renderElement)}
+      </div>
+    );
+  }
+);
+
+RevealText.displayName = 'RevealText';
+export default RevealText;

package/text/rotate-text/css/index.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { forwardRef, HTMLAttributes, useEffect, useState, useRef, useCallback } from 'react';
+import styles from './rotate-text.module.css';
+
+export interface RotateTextProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Static text before rotating words */
+  prefix?: string;
+  /** Static text after rotating words */
+  suffix?: string;
+  /** Words to rotate through */
+  words: string[];
+  /** Rotation direction/animation */
+  animation?: 'up' | 'down' | 'left' | 'right' | 'flip' | 'fade' | 'zoom' | 'blur';
+  /** Duration each word is shown (ms) */
+  duration?: number;
+  /** Animation speed */
+  speed?: 'fast' | 'normal' | 'slow';
+  /** Highlight active word */
+  highlight?: boolean;
+  /** Highlight color */
+  highlightColor?: string;
+  /** Show underline on active */
+  underline?: boolean;
+  /** Show brackets around rotator */
+  bracket?: boolean;
+  /** Bracket color */
+  bracketColor?: string;
+  /** Pause on hover */
+  pauseOnHover?: boolean;
+  /** Show typing cursor */
+  cursor?: boolean;
+  /** Callback when word changes */
+  onChange?: (word: string, index: number) => void;
+}
+
+export const RotateText = forwardRef<HTMLSpanElement, RotateTextProps>(
+  (
+    {
+      prefix,
+      suffix,
+      words,
+      animation = 'up',
+      duration = 2000,
+      speed = 'normal',
+      highlight = false,
+      highlightColor = '#ff0040',
+      underline = false,
+      bracket = false,
+      bracketColor = '#666',
+      pauseOnHover = false,
+      cursor = false,
+      onChange,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [exitIndex, setExitIndex] = useState<number | null>(null);
+    const intervalRef = useRef<NodeJS.Timeout>();
+    const isPaused = useRef(false);
+
+    const maxWidth = Math.max(...words.map(w => w.length));
+
+    const rotate = useCallback(() => {
+      if (isPaused.current) return;
+      
+      setExitIndex(currentIndex);
+      const nextIndex = (currentIndex + 1) % words.length;
+      setCurrentIndex(nextIndex);
+      onChange?.(words[nextIndex], nextIndex);
+      
+      setTimeout(() => setExitIndex(null), 500);
+    }, [currentIndex, words, onChange]);
+
+    useEffect(() => {
+      intervalRef.current = setInterval(rotate, duration);
+      return () => {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      };
+    }, [rotate, duration]);
+
+    const handleMouseEnter = () => {
+      if (pauseOnHover) isPaused.current = true;
+    };
+
+    const handleMouseLeave = () => {
+      if (pauseOnHover) isPaused.current = false;
+    };
+
+    const containerClasses = [
+      styles.container,
+      styles[animation],
+      styles[speed],
+      highlight && styles.highlight,
+      underline && styles.underline,
+      bracket && styles.bracket,
+      pauseOnHover && styles.pauseOnHover,
+      cursor && styles.cursor,
+      className
+    ].filter(Boolean).join(' ');
+
+    return (
+      <span
+        ref={ref}
+        className={containerClasses}
+        style={{
+          '--highlight-color': highlightColor,
+          '--bracket-color': bracketColor,
+          ...style
+        } as React.CSSProperties}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        {prefix && <span className={styles.static}>{prefix} </span>}
+        <span 
+          className={styles.rotator}
+          style={{ width: `${maxWidth}ch` }}
+        >
+          {words.map((word, i) => (
+            <span
+              key={i}
+              className={`${styles.word} ${i === currentIndex ? styles.active : ''} ${i === exitIndex ? styles.exit : ''}`}
+            >
+              {word}
+            </span>
+          ))}
+        </span>
+        {suffix && <span className={styles.static}> {suffix}</span>}
+      </span>
+    );
+  }
+);
+
+RotateText.displayName = 'RotateText';
+export default RotateText;