useCounterAnimation · @codigosinsiesta/theme

Demos

Disparo manual

Target

Auto-start al entrar en viewport

Haz scroll dentro de esta caja para activar el contador.

. . .

proyectos completados

. . .

Uso canónico (combo con IntersectionObserver)

stat-counter.svelte

<script>
  import { useIntersectionObserver, useCounterAnimation } from '@codigosinsiesta/theme';

  const inView  = useIntersectionObserver({ threshold: 0.5 });
  const counter = useCounterAnimation({
    target: 42,
    duration: 2000,
    isActive: () => inView.isVisible
  });
</script>

<div use:inView.target>
  {counter.value}+
</div>

Pasa isActive como función para que el composable reaccione a cambios via $effect. Si pasas un boolean literal, solo se usa como valor inicial.

API

Option	Tipo	Default	Descripción
`target`	`number`	—	Valor final del contador.
`duration`	`number`	`2000`	Duración total en ms.
`isActive`	`boolean \| () => boolean`	`true`	Si es función, el composable usa `$effect` para reaccionar a sus cambios.
`easing`	`(t: number) => number`	`easeOutCubic`	Curva de progreso. Recibe `t ∈ [0,1]`.

Devuelve:

Field	Tipo	Descripción
`value`	`number` (reactivo)	Valor actual del contador.
`isComplete`	`boolean` (reactivo)	`true` tras alcanzar target.
`target`	`number` (reactivo)	Target actual (cambiable vía `setTarget`).
`isActive`	`boolean` (reactivo)	Estado activo actual.
`reset()`	fn	Vuelve a 0 y rearranca si está activo.
`setTarget(n)`	fn	Cambia el target y resetea.
`setActive(b)`	fn	Setter imperativo (alternativa al getter reactivo).

Accesibilidad

Si el usuario tiene activo prefers-reduced-motion: reduce, el composable salta directo al target sin interpolar — sin animación de cuenta. El consumidor no tiene que hacer nada extra.

Casos de uso

Decks: SlideStats con métricas animadas (hoy son estáticas).
Portfolio CsS: contadores de proyectos, años de experiencia, métricas de impacto.
Landings y dashboards: cualquier número que cuente una historia.