componente · @solu30/ui-kit/animation

AnimatedSection

Bloque que aparece cuando entra en pantalla, con cinco animaciones de entrada y retardo configurable.

97 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
gestorsalon

El componente, montado

Cargando el espécimen…

export function AnimatedSectionMatrix() {
  const [runId, setRunId] = useState(0)
  return (
    <Stage label="AnimatedSection · 5 animaciones" tall wide>
      <div className="flex w-full flex-col gap-3">
        <Replay onClick={() => setRunId((n) => n + 1)} />
        <div key={runId} className="grid w-full grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-5">
          {ANIMATED_SECTION_CELLS.map((c) => (
            <AnimatedSection key={c.animation} animation={c.animation} duration={550} className="h-full">
              <RevealCard eyebrow={c.eyebrow} title={c.title} />
            </AnimatedSection>
          ))}
        </div>
      </div>
    </Stage>
  )
}

De specimens/animation.tsx · AnimatedSectionMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { AnimatedSection } from '@solu30/ui-kit/animation'

Props

4 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
animation	opcional	`'fadeIn' \| 'slideUp' \| 'slideLeft' \| 'slideRight' \| 'scaleIn'`	—
delay	opcional	`number`	—
duration	opcional	`number`	—
threshold	opcional	`number`	—

Ejemplo del paquete

// Anima al entrar en el viewport; `threshold` es cuánto tiene que verse para disparar.
<AnimatedSection animation="slideUp" delay={100}>
  <SeccionCasos />
</AnimatedSection>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.