Generador de texto a flor: Arte de letras animadas

1,449 sergioarmijo30

Abrir en el editor Publica tu código

Generador de texto a flor: Arte de letras animadas

Recomendado

25 August 2024

Sistema solar 3D CSS

18 May 2024

Alternar emoji

18 December 2023

Animación de Texto en HTML y CSS

HTML

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Decrypt Flower — convierte texto en flor</title>
  <style>
    :root{--size:640px}
    body{font-family: Inter, system-ui, sans-serif;display:flex;gap:20px;align-items:flex-start;justify-content:center;padding:24px;background:#0f172a;color:#e6eef8}
    .panel{max-width:380px}
    h1{font-size:20px;margin:0 0 12px}
    textarea{width:100%;height:120px;padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:inherit;resize:vertical}
    .controls{display:flex;gap:8px;margin-top:8px;align-items:center}
    .btn{background:#7c3aed;border:none;padding:8px 12px;border-radius:8px;color:white;cursor:pointer}
    .btn:active{transform:translateY(1px)}
    label{font-size:13px}
    .stage{width:var(--size);height:var(--size);border-radius:12px;background:radial-gradient(ellipse at center,#0b1220 0%, #071025 60%);box-shadow:0 10px 30px rgba(2,6,23,0.6);position:relative;overflow:hidden}
    .letter{position:absolute;left:0;top:0;transform-origin:center center;will-change:transform,opacity;font-weight:600;user-select:none}
    .hint{opacity:0.6;font-size:13px;margin-top:8px}
    .footer{opacity:0.6;font-size:13px;margin-top:14px}
  </style>
</head>
<body>
  <div class="panel">
    <h1>Decrypt Flower — Texto → Flor</h1>
    <input id="input" placeholder="Pega aquí muchas letras o texto..."Hola, esto será una flor hecha con letras. Prueba con muchas letras o copia/pega texto largo./>
    <div class="controls">
      <label>Duración (seg): <input id="duration" type="number" value="10" min="1" max="60" style="width:64px;margin-left:6px;padding:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit"></label>
      <button id="start" class="btn">Iniciar</button>
      <button id="reset" class="btn" style="background:#334155">Reset</button>
    </div>
    <div class="hint">Consejo: si quieres más detalles, pega mucho texto. La animación coloca las letras en pétalos y centro.</div>
    <div class="footer">Hecho para Alejandro — ajusta los parámetros si quieres otra forma.</div>
  </div>

function clearStage(){
  stage.innerHTML = '';
}

function computeTargets(){
  const elems = Array.from(stage.children);
  const cx = stage.clientWidth/2;
  const cy = stage.clientHeight/2;
  const total = elems.length;
  const petals = Math.max(3, Math.round(Math.min(12, Math.sqrt(total)/1.2)));
  const perPetal = Math.ceil(total / petals);

elems.forEach((el, idx) => {
    const petalIndex = idx % petals;
    const layer = Math.floor(idx / petals); // distance from center
    // base radius for layer
    const rBase = 30 + layer * 20;
    // give petals a smooth curve using a sinusoidal offset
    const angle = (petalIndex / petals) * Math.PI*2 + Math.sin(idx*0.25) * 0.25;
    // slightly vary radius for natural look
    const radius = rBase + Math.sin(idx*0.37)*10 + Math.random()*6;
    const tx = cx + radius * Math.cos(angle);
    const ty = cy + radius * Math.sin(angle);
    // rotation to align roughly with radial direction
    const rot = (angle * 180/Math.PI) + 90 + (Math.random()-0.5)*30;
    el.dataset.tx = tx;
    el.dataset.ty = ty;
    el.dataset.rot = rot;
    // center letters (first few) go to very center and larger
    if(idx < Math.max(6, Math.floor(total*0.03))){
      const cRadius = Math.random()*18;
      el.dataset.tx = cx + (Math.random()-0.5)*cRadius;
      el.dataset.ty = cy + (Math.random()-0.5)*cRadius;
      el.style.fontSize = `${14 + Math.random()*18}px`;
    }
  });
}

startBtn.addEventListener('click', ()=>{
  const text = input.value.trim();
  if(!text){ alert('Ingresa algo de texto para convertir en flor.'); return; }
  createLetters(text);
  computeTargets();
  const dur = Math.max(1, Number(durationInput.value) || 10);
  // small timeout so initial render happens before animating
  setTimeout(()=> animateToFlower(dur), 80);
});

resetBtn.addEventListener('click', ()=>{
  clearStage();
});

// create an initial preview
createLetters(input.value);
computeTargets();
</script>
</body>
</html>

CSS