Generador de texto a flor: Arte de letras animadas

Abrir en el editor Video Publica tu código

Recomendado

8 May 2025

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

Generador de texto a flor: Arte de letras animadas

Recomendado

botón de escaneo

Invasores del espacio

Tarjeta de volteo de precios

HTML

CSS

JS

Recomendado

botón de escaneo

Invasores del espacio

Tarjeta de volteo de precios

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS