Componentes

import { useState } from "react";

export default function GradientReact() {
  const [colorA, setColorA] = useState("#2563eb");
  const [colorB, setColorB] = useState("#7c3aed");
  const [angle, setAngle]   = useState(135);

  const css = `background: linear-gradient(${angle}deg, ${colorA}, ${colorB});`;

  return (
    <>
      <div style={{ background: `linear-gradient(${angle}deg, ${colorA}, ${colorB})` }} />
      <input type="color" value={colorA} onChange={e => setColorA(e.target.value)} />
      <input type="color" value={colorB} onChange={e => setColorB(e.target.value)} />
      <input type="range" min={0} max={360} value={angle}
             onChange={e => setAngle(Number(e.target.value))} />
      <code>{css}</code>
    </>
  );
}

<template>
  <div class="scene" @click="flipped = !flipped">
    <div class="card" :class="{ 'is-flipped': flipped }">
      <div class="face front">¿Qué es Vue?</div>
      <div class="face back">Framework progresivo...</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const flipped = ref(false);
</script>

<style scoped>
.card {
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.4,0,.2,1);
}
.card.is-flipped { transform: rotateY(180deg); }
.face { backface-visibility: hidden; }
.back { transform: rotateY(180deg); }
</style>

import { useState } from "preact/hooks";

function getStrength(pwd: string) {
  let score = 0;
  if (pwd.length >= 8)           score++;
  if (pwd.length >= 12)          score++;
  if (/[A-Z]/.test(pwd))         score++;
  if (/[0-9]/.test(pwd))         score++;
  if (/[^A-Za-z0-9]/.test(pwd))  score++;
  return score;
}

export default function PasswordPreact() {
  const [pwd, setPwd] = useState("");
  const strength = getStrength(pwd);

  return (
    <>
      <input type="password" onInput={e => setPwd(e.target.value)} />
      {/* 5 barras de color que se llenan según score */}
      {[0,1,2,3,4].map(i => (
        <div style={{ background: i <= strength ? color : "#e5e7eb" }} />
      ))}
    </>
  );
}

<script>
  import { onMount } from "svelte";
  import { tweened } from "svelte/motion";
  import { cubicOut } from "svelte/easing";

  const skills = [
    { name: "TypeScript", pct: 90, color: "#3178c6" },
    { name: "Rust",       pct: 62, color: "#ce422b" },
    // ...
  ];

  const values = skills.map(() =>
    tweened(0, { duration: 900, easing: cubicOut })
  );

  onMount(() => {
    skills.forEach((s, i) => values[i].set(s.pct));
  });
</script>

{#each skills as skill, i}
  <div class="bar" style="width: {$values[i]}%" />
{/each}

import { createMemo, createSignal } from "solid-js";

export default function InvestmentSimulatorSolid() {
  const [principal, setPrincipal] = createSignal(12000);
  const [monthly, setMonthly] = createSignal(450);
  const [rate, setRate] = createSignal(6.5);
  const [years, setYears] = createSignal(12);

  const projection = createMemo(() => {
    // calcula el crecimiento por año con interés compuesto
  });

  return (
    <>
      {/* sliders + resumen + barras por año */}
    </>
  );
}