Split Text

"use client";
// Caracteres disperses qui s'assemblent

const randomPos = chars.map(() => ({
  x: (Math.random() - 0.5) * 400,
  y: (Math.random() - 0.5) * 200,
  rotate: (Math.random() - 0.5) * 120,
}));

{chars.map((char, i) => (
  <span style={{
    display: "inline-block",
    transform: assembled
      ? "translate(0, 0) rotate(0deg)"
      : `translate(${randomPos[i].x}px, ${randomPos[i].y}px) rotate(${randomPos[i].rotate}deg)`,
    opacity: assembled ? 1 : 0,
    transition: `all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) ${i * 50}ms`,
  }}>
    {char}
  </span>
))}