Need More Gradients - Documentación

Características

🎨

Componentes con gradientes

Dos componentes especializados: Grapper y Gradow

⚡

Fácil instalación

Instalable desde NPM o sistema de copiar-usar

🔧

Altamente personalizable

Múltiples variantes y modos de configuración

📱

Interactivo

Efectos que siguen el cursor y animaciones fluidas

🎯

TypeScript

Completamente tipado para mejor experiencia de desarrollo

🌈

Variables CSS

Personalización completa a través de variables CSS

Instalación

Via NPM

npm install need-more-gradients-ui

Sistema Copy-Use

También puedes copiar los componentes directamente en tu proyecto:

Copia los archivos Grapper.tsx, Grapper.css, Gradow.tsx y Gradow.css
Importa los componentes en tu proyecto
Asegúrate de tener las variables CSS necesarias en tu tema

Inicio Rápido

import {Grapper, Gradow} from 'need-more-gradients-ui'

function App() {
  return (
    <div>
      <Grapper variant="static" mode="border">
        <p>Contenido con borde gradiente</p>
      </Grapper>
      
      <Gradow variant="spin" mode="permanent">
        <h2>Título con resplandor</h2>
      </Gradow>
    </div>
  )
}

Componente Grapper

Grapper es un componente que envuelve contenido con bordes o fondos de gradiente animados.

Props del Grapper

Prop	Tipo	Valor por defecto	Descripción
`variant`	'static' \| 'spotlight' \| 'sticky'	'static'	Tipo de animación del gradiente
`mode`	'border' \| 'solid' \| 'ghost'	'border'	Estilo de visualización
`borderWidth`	string	'2px'	Grosor del borde (solo en mode='border')
`borderRadius`	string	'16px'	Radio de las esquinas
`children`	React.ReactNode	-	Contenido a envolver

Variantes del Grapper

Static

Gradiente estático sin animación:

<Grapper variant="static" mode="border">
  Contenido con borde gradiente estático
</Grapper>

Spotlight

Gradiente que rota continuamente:

<Grapper variant="spotlight" mode="solid">
  Contenido con fondo gradiente rotativo
</Grapper>

Sticky

Gradiente que sigue el cursor del mouse:

<Grapper variant="sticky" mode="ghost">
  Contenido que se ilumina al hacer hover
</Grapper>

Modos del Grapper

border: Muestra solo el borde con gradiente
solid: Rellena completamente con el gradiente
ghost: Aparece solo al hacer hover

Componente Gradow

Gradow añade un efecto de resplandor con gradiente detrás del contenido.

Props del Gradow

Prop	Tipo	Valor por defecto	Descripción
`variant`	'spin' \| 'pulse' \| 'sticky'	'spin'	Tipo de animación del resplandor
`mode`	'permanent' \| 'hover'	'permanent'	Cuándo mostrar el resplandor
`opacity`	number	0.5	Opacidad del resplandor (0-1)
`children`	React.ReactNode	-	Contenido a envolver

Variantes del Gradow

Spin

Resplandor que rota continuamente:

<Gradow variant="spin" mode="permanent" opacity={0.7}>
  <h2>Título con resplandor rotativo</h2>
</Gradow>

Pulse

Resplandor que pulsa con diferentes colores:

<Gradow variant="pulse" mode="hover" opacity={0.8}>
  <button>Botón con efecto pulse al hover</button>
</Gradow>

Sticky

Resplandor que sigue el cursor:

<Gradow variant="sticky" mode="permanent">
  <div>Contenido con resplandor que sigue el mouse</div>
</Gradow>

Personalización

Variables CSS Requeridas

Para que los componentes funcionen correctamente, necesitas definir estas variables CSS en tu tema:

:root {
  /* Colores del gradiente */
  --gradient-100: #ff6b6b;
  --gradient-200: #4ecdc4;
  --gradient-300: #45b7d1;
  
  /* Color del contenido sobre gradiente sólido */
  --gradient-content: #ffffff;
  
  /* Colores de superficie */
  --surface-300: #f8f9fa;
  
  /* Color del contenido normal */
  --content: #333333;
}

Personalización Avanzada

Puedes personalizar completamente los gradientes modificando las variables CSS:

/* Tema oscuro */
:root[data-theme="dark"] {
  --gradient-100: #667eea;
  --gradient-200: #764ba2;
  --gradient-300: #f093fb;
  --gradient-content: #ffffff;
  --surface-300: #1a1a1a;
  --content: #ffffff;
}

/* Tema personalizado */
:root[data-theme="custom"] {
  --gradient-100: #ffeaa7;
  --gradient-200: #fab1a0;
  --gradient-300: #fd79a8;
}

Ejemplos Avanzados

Tarjeta con Efectos Combinados

<Gradow variant="pulse" mode="hover" opacity={0.3}>
  <Grapper variant="sticky" mode="ghost" borderRadius="20px">
    <div style={{ padding: '2rem' }}>
      <h3>Tarjeta Interactiva</h3>
      <p>Esta tarjeta combina ambos componentes para crear un efecto único</p>
    </div>
  </Grapper>
</Gradow>

Botón con Múltiples Estados

function GradientButton({ children, onClick }) {
  const [isActive, setIsActive] = useState(false)
  
  return (
    <Gradow 
      variant="spin" 
      mode={isActive ? "permanent" : "hover"}
      opacity={0.6}
    >
      <Grapper 
        variant="spotlight" 
        mode="solid"
        borderRadius="12px"
      >
        <button 
          onClick={() => {
            setIsActive(!isActive)
            onClick?.()
          }}
          style={{ 
            padding: '1rem 2rem',
            border: 'none',
            background: 'transparent',
            color: 'inherit',
            cursor: 'pointer'
          }}
        >
          {children}
        </button>
      </Grapper>
    </Gradow>
  )
}

Layout con Efectos de Fondo

<div style={{ position: 'relative', minHeight: '100vh' }}>
  <Gradow variant="sticky" mode="permanent" opacity={0.1}>
    <div style={{ 
      position: 'absolute',
      inset: 0,
      zIndex: -1
    }} />
  </Gradow>
  
  <main>
    <h1>Contenido principal</h1>
    <p>El fondo responde al movimiento del cursor</p>
  </main>
</div>

Enlaces Útiles

📦 NPM Package

Instala el paquete desde NPM

💻 Repositorio

Código fuente y ejemplos

🎯 Ejemplos

Casos de uso avanzados