Text to Flower Generator - Animated Letter Art

Open In Editor Video Publish Your Code

<!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>

Text to Flower Generator - Animated Letter Art

Recommended

Slide Text Effect

Sunflower

Animated card with 3d hover effect

HTML

CSS

JS

Recommended

Slide Text Effect

Sunflower

Animated card with 3d hover effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS