Generatore di testo in fiori - Lettere animate

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

22 July 2025

Spinner dell'icona di caricamento CSS

14 September 2024

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

Generatore di testo in fiori - Lettere animate

Consigliato

Spinner dell'icona di caricamento CSS

Interruttore Occhio Minion

Negozio di scarpe

HTML

CSS

JS

Consigliato

Spinner dell'icona di caricamento CSS

Interruttore Occhio Minion

Negozio di scarpe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS