Generador de texto a flor: Arte de letras animadas

1,359 sergioarmijo30

Abrir en el editor Publica tu código

Generador de texto a flor: Arte de letras animadas

Recomendado

28 November 2024

Fondo animado de Matrix

25 July 2025

Cuadro de registro de inicio de sesión 3D HTML CSS

12 January 2026

Cargador de juegos HTML: emulador de NES con botón de reproducción

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