Easing Battleground

Create an Easing: You can use the caveman easing generator or the easing-creation tool of your choice.
Name Your Creation: Give your easing a catchy name. Be creative!
Sign Your Work: Optionally, add your name as the author.
Submit and Watch: Hit submit and see your easing come to life on the leaderboard!
Vote: Check out other easings and vote for your favorites. Use 👍 to upvote and 👎 to downvote.

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { BrowserRouter as Router, Route, Link, Routes } from "https://esm.sh/react-router-dom"; function EasingVisualizer({ easing }) { const canvasRef = React.useRef(null); React.useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; function drawCurve() { ctx.clearRect(0, 0, width, height); const [x1, y1, x2, y2] = easing.params; const bezierFunction = cubicBezier(x1, y1, x2, y2); ctx.beginPath(); ctx.moveTo(0, height); for (let t = 0; t <= 1; t += 0.01) { const point = bezierFunction(t); const x = point.x * width; const y = height - point.y * height; ctx.lineTo(x, y); } ctx.strokeStyle = 'black'; ctx.lineWidth = 2; ctx.stroke(); // Animate the dot const time = (Date.now() % 3000) / 3000; const point = bezierFunction(time); const x = point.x * width; const y = height - point.y * height; ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI * 2); ctx.fillStyle = 'blue'; ctx.fill(); } const animationFrame = requestAnimationFrame(function animate() { drawCurve(); requestAnimationFrame(animate); }); return () => cancelAnimationFrame(animationFrame); }, [easing]); return

🚀 Welcome to the Easing Battleground! 🎢

💡 Tips for Great Easings:

🧙‍♂️ Cubic-Bezier Magic:

🏆 Leaderboard:

{easing.name}

Leaderboard Preview

Easing Battleground Leaderboard

Easing Battleground

easingbattleground