@oalacea/chaosui 0.1.0

package/components/text/flicker-text/flicker-text.module.css

@@ -0,0 +1,91 @@
+.flicker {
+  display: inline-block;
+  --min-opacity: 0;
+}
+
+/* SLOW */
+.slow {
+  animation: flicker-slow 4s infinite;
+}
+
+@keyframes flicker-slow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 1; }
+  52% { opacity: var(--min-opacity); }
+  54% { opacity: 1; }
+  80% { opacity: 1; }
+  82% { opacity: var(--min-opacity); }
+  84% { opacity: 1; }
+}
+
+/* NORMAL */
+.normal {
+  animation: flicker-normal 2s infinite;
+}
+
+@keyframes flicker-normal {
+  0%, 100% { opacity: 1; }
+  33% { opacity: 1; }
+  34% { opacity: var(--min-opacity); }
+  35% { opacity: 1; }
+  66% { opacity: 1; }
+  67% { opacity: var(--min-opacity); }
+  68% { opacity: 1; }
+  69% { opacity: var(--min-opacity); }
+  70% { opacity: 1; }
+}
+
+/* FAST */
+.fast {
+  animation: flicker-fast 0.5s infinite;
+}
+
+@keyframes flicker-fast {
+  0%, 100% { opacity: 1; }
+  10% { opacity: var(--min-opacity); }
+  20% { opacity: 1; }
+  30% { opacity: var(--min-opacity); }
+  40% { opacity: 1; }
+  60% { opacity: 1; }
+  70% { opacity: var(--min-opacity); }
+  80% { opacity: 1; }
+}
+
+/* ERRATIC */
+.erratic {
+  animation: flicker-erratic 3s infinite;
+}
+
+@keyframes flicker-erratic {
+  0%, 100% { opacity: 1; }
+  5% { opacity: var(--min-opacity); }
+  6% { opacity: 1; }
+  7% { opacity: var(--min-opacity); }
+  8% { opacity: 1; }
+  25% { opacity: 1; }
+  26% { opacity: var(--min-opacity); }
+  27% { opacity: 1; }
+  50% { opacity: 1; }
+  51% { opacity: var(--min-opacity); }
+  52% { opacity: 1; }
+  53% { opacity: var(--min-opacity); }
+  54% { opacity: 1; }
+  55% { opacity: var(--min-opacity); }
+  56% { opacity: 1; }
+  75% { opacity: 1; }
+  76% { opacity: var(--min-opacity); }
+  77% { opacity: 1; }
+  90% { opacity: 1; }
+  91% { opacity: var(--min-opacity); }
+  92% { opacity: 1; }
+}
+
+/* HOVER ONLY */
+.hoverOnly {
+  animation: none;
+  opacity: 1;
+}
+
+.hoverOnly:hover {
+  animation: flicker-normal 0.5s infinite;
+}

package/components/text/flicker-text/index.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './flicker-text.module.css';
+
+export interface FlickerTextProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The text to display */
+  children: string;
+  /** Flicker speed: slow, normal, fast, erratic */
+  speed?: 'slow' | 'normal' | 'fast' | 'erratic';
+  /** Minimum opacity during flicker */
+  minOpacity?: number;
+  /** Flicker only on hover */
+  hoverOnly?: boolean;
+}
+
+export const FlickerText = forwardRef<HTMLSpanElement, FlickerTextProps>(
+  (
+    {
+      children,
+      speed = 'normal',
+      minOpacity = 0,
+      hoverOnly = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={`${styles.flicker} ${styles[speed]} ${hoverOnly ? styles.hoverOnly : ''} ${className || ''}`}
+        style={{
+          '--min-opacity': minOpacity,
+          ...style,
+        } as React.CSSProperties}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+FlickerText.displayName = 'FlickerText';
+
+export default FlickerText;

package/components/text/glitch-text/glitch-text.module.css

@@ -0,0 +1,142 @@
+.glitch {
+  position: relative;
+  display: inline-block;
+  --glitch-color: #ff0040;
+  --glitch-color-alt: #00ffff;
+}
+
+.glitch::before,
+.glitch::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.glitch::before {
+  color: var(--glitch-color);
+  z-index: -1;
+}
+
+.glitch::after {
+  color: var(--glitch-color-alt);
+  z-index: -2;
+}
+
+/* SUBTLE */
+.subtle::before {
+  animation: glitch-subtle-1 3s infinite linear alternate-reverse;
+  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+}
+
+.subtle::after {
+  animation: glitch-subtle-2 3s infinite linear alternate-reverse;
+  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+  opacity: 0.8;
+}
+
+@keyframes glitch-subtle-1 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-1px, 1px); }
+  40% { transform: translate(-1px, -1px); }
+  60% { transform: translate(1px, 1px); }
+  80% { transform: translate(1px, -1px); }
+}
+
+@keyframes glitch-subtle-2 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(1px, -1px); }
+  40% { transform: translate(1px, 1px); }
+  60% { transform: translate(-1px, -1px); }
+  80% { transform: translate(-1px, 1px); }
+}
+
+/* MEDIUM */
+.medium::before {
+  animation: glitch-medium-1 0.3s infinite linear alternate-reverse;
+  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+}
+
+.medium::after {
+  animation: glitch-medium-2 0.3s infinite linear alternate-reverse;
+  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+  opacity: 0.8;
+}
+
+@keyframes glitch-medium-1 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(-2px, -2px); }
+  60% { transform: translate(2px, 2px); }
+  80% { transform: translate(2px, -2px); }
+}
+
+@keyframes glitch-medium-2 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(2px, -2px); }
+  40% { transform: translate(2px, 2px); }
+  60% { transform: translate(-2px, -2px); }
+  80% { transform: translate(-2px, 2px); }
+}
+
+/* INTENSE */
+.intense::before {
+  animation: glitch-intense-1 0.15s infinite linear alternate-reverse;
+  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+}
+
+.intense::after {
+  animation: glitch-intense-2 0.15s infinite linear alternate-reverse;
+  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+  opacity: 0.8;
+}
+
+@keyframes glitch-intense-1 {
+  0% { transform: translate(0); }
+  10% { transform: translate(-3px, 3px); }
+  20% { transform: translate(3px, -3px); }
+  30% { transform: translate(-3px, -3px); }
+  40% { transform: translate(3px, 3px); }
+  50% { transform: translate(-3px, 0); }
+  60% { transform: translate(3px, 0); }
+  70% { transform: translate(0, 3px); }
+  80% { transform: translate(0, -3px); }
+  90% { transform: translate(-3px, 3px); }
+  100% { transform: translate(0); }
+}
+
+@keyframes glitch-intense-2 {
+  0% { transform: translate(0); }
+  10% { transform: translate(3px, -3px); }
+  20% { transform: translate(-3px, 3px); }
+  30% { transform: translate(3px, 3px); }
+  40% { transform: translate(-3px, -3px); }
+  50% { transform: translate(3px, 0); }
+  60% { transform: translate(-3px, 0); }
+  70% { transform: translate(0, -3px); }
+  80% { transform: translate(0, 3px); }
+  90% { transform: translate(3px, -3px); }
+  100% { transform: translate(0); }
+}
+
+/* STATIC (no animation) */
+.static::before {
+  animation: none;
+  transform: translate(-2px, 2px);
+}
+
+.static::after {
+  animation: none;
+  transform: translate(2px, -2px);
+}
+
+.static:hover::before {
+  animation: glitch-medium-1 0.2s infinite linear alternate-reverse;
+}
+
+.static:hover::after {
+  animation: glitch-medium-2 0.2s infinite linear alternate-reverse;
+}

package/components/text/glitch-text/index.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { forwardRef, HTMLAttributes } from 'react';
+import styles from './glitch-text.module.css';
+
+export interface GlitchTextProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The text to display with glitch effect */
+  children: string;
+  /** Glitch intensity: subtle, medium, intense */
+  intensity?: 'subtle' | 'medium' | 'intense';
+  /** Glitch color (CSS color for the offset layers) */
+  glitchColor?: string;
+  /** Secondary glitch color */
+  glitchColorAlt?: string;
+  /** Disable animation (static glitch) */
+  static?: boolean;
+}
+
+export const GlitchText = forwardRef<HTMLSpanElement, GlitchTextProps>(
+  (
+    {
+      children,
+      intensity = 'medium',
+      glitchColor = '#ff0040',
+      glitchColorAlt = '#00ffff',
+      static: isStatic = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={`${styles.glitch} ${styles[intensity]} ${isStatic ? styles.static : ''} ${className || ''}`}
+        data-text={children}
+        style={{
+          '--glitch-color': glitchColor,
+          '--glitch-color-alt': glitchColorAlt,
+          ...style,
+        } as React.CSSProperties}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  }
+);
+
+GlitchText.displayName = 'GlitchText';
+
+export default GlitchText;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@oalacea/chaosui",
+  "version": "0.1.0",
+  "description": "Glitch, noise, and distortion components for React. Copy-paste like shadcn.",
+  "type": "module",
+  "bin": {
+    "chaos-ui": "./bin/cli.js",
+    "chaosui": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "components"
+  ],
+  "keywords": [
+    "react",
+    "components",
+    "glitch",
+    "noise",
+    "distortion",
+    "ui",
+    "effects",
+    "css",
+    "animation"
+  ],
+  "author": "Oalacea",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Pamacea/chaos.git"
+  },
+  "homepage": "https://github.com/Pamacea/chaos",
+  "dependencies": {
+    "commander": "^12.0.0",
+    "picocolors": "^1.0.0",
+    "prompts": "^2.4.2",
+    "fs-extra": "^11.2.0"
+  }
+}