Emoji Explosion Animation

\n {exploded && emojis.map((emoji, index) => (\n \n ))}\n

📦

\n {exploded &&

⭐

}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Emoji Explosion Animation\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: #f0f0f0;\n}\n\n.container {\n text-align: center;\n}\n\n.explosion-container {\n position: relative;\n display: inline-block;\n}\n\n.box {\n font-size: 4rem;\n position: relative;\n z-index: 1;\n transform: translate(0, 0) rotate(0deg);\n}\n\n.box-animate {\n animation: moveBox 1800ms linear forwards;\n}\n\n.final-star {\n position: absolute;\n font-size: 2rem;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n animation: finalStar 360ms linear forwards;\n animation-delay: 1440ms; /* 80% of 1800ms */\n}\n\n@keyframes finalStar {\n 0% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(1) rotate(0deg);\n }\n 100% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(2) rotate(-45deg);\n }\n}\n\n@keyframes moveBox {\n 0%, 74.9% {\n transform: translate(0, 0) rotate(0deg);\n }\n 80% {\n transform: translate(2rem, 0) rotate(12deg);\n }\n 90% {\n transform: translate(3.5rem, 0) rotate(21deg);\n }\n 100% {\n transform: translate(5rem, 0) rotate(30deg);\n }\n}\n\n.particle {\n position: absolute;\n font-size: 2rem;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0);\n animation: explode 1800ms linear forwards;\n}\n\n@keyframes explode {\n /* Initial state */\n 0% {\n transform: translate(-50%, 0);\n }\n \n /* First phase: Rise together in pairs */\n 25% {\n transform: \n translate(calc(-50% + var(--initial-x)), 0)\n rotate(calc(var(--angle) * 0.3)) \n translateY(calc(var(--height) * -0.25));\n }\n \n /* Midpoint: Maximum height for first phase */\n 50% {\n transform: \n translate(calc(-50% + var(--initial-x)), 0)\n rotate(calc(var(--angle) * 0.5)) \n translateY(calc(var(--height) * -0.5));\n }\n \n /* Second phase: Begin separation */\n 75% {\n transform: \n translate(calc(-50% + calc(var(--initial-x) + (var(--final-x) - var(--initial-x)) * 0.5)), 0)\n rotate(calc(var(--angle) * 0.75)) \n translateY(calc(var(--height) * -0.75));\n }\n \n /* Final state: Fully separated */\n 100% {\n transform: \n translate(calc(-50% + var(--final-x)), 0)\n rotate(var(--angle)) \n translateY(calc(var(--height) * -1));\n }\n}\n`;","deleted","label",[100],"permalink","https://www.val.town/x/crif/reactEmojiExplosionAnimation/code/main.tsx","extension","actionData","errors"]