Jest | Jokes for Traders & Builders

Ralph Smith — Thu, 02 Apr 2026 14:53:40 +0000

This is a submission for the DEV April Fools Challenge

What I Built

Jest by Quant Alchemy — a joke-a-tap web app that serves up 115+ jokes with a slick text scramble animation (Aceternity UI-style). Each joke reveals character-by-character through a randomized scramble effect before settling into the final punchline. Tap, swipe, or press spacebar to keep the laughs coming.

It's delightfully useless in the best way, built purely to make people smile on April Fools' Day.

Features include:

• 🃏 Shuffled joke queue (never repeats until you've seen them all)
• ✨ Character-by-character scramble reveal animation
• 📋 Copy button to share your favorites
• 🎩 A QA icon wearing a jester hat (because even trading software needs to lighten up sometimes)
• 🌑 Dark copper-themed design matching the Quant Alchemy brand

Demo

👉 jest.quantalchemy.io

Works on desktop (click/spacebar) and mobile (tap/swipe). No install, no signup, no build step — just jokes.

Code

🤖

QuantAlchemy / jest-qa

April fools project for fun and possibly marketing

The entire app is pure HTML, CSS, and vanilla JavaScript — no frameworks, no build tools, no dependencies. Two files do all the work:

• index.html — the complete app (~700 lines including inline CSS/JS)
• jokes.js — the joke database (115+ jokes as a JS array)

How I Built It

I'll mention more about this below, but this was born from and idea that hit me while squatting at the gym. I've been working to better orchestrate AI and this was a fun project to do that with. I didn't know there was going to be a dev challenge for this so I'm submitting this after seeing the email, but I built the project on April 1st (yesterday for me) and thought it would be a fun first submission too.

Stack: Pure HTML/CSS/JS — zero dependencies, zero build step. Deployed on Vercel as a static site.

The text scramble engine cycles characters through random glyphs at 30ms intervals, then resolves them left-to-right with staggered delays over ~800ms. Unresolved characters glow in copper. The "scramble out" phase randomizes the existing text while fading opacity before the new joke scrambles in.

Design: Dark-first theme using the Quant Alchemy copper palette (#c17d3c → #e8a96a), Fraunces serif for jokes, IBM Plex Sans for UI, floating CSS particles in the background, and a noise texture overlay. The jester hat on the logo is an SVG from SVG Repo (https://www.svgrepo.com/) (CC0 license), recolored to copper and tilted for playfulness.

OG image: Generated with Google Gemini 3.1 Flash Image Preview via the Generative Language API — one prompt, one shot, came out perfect.

AI-assisted development: The app was built collaboratively with an AI coding assistant(Claude) handling the implementation while I directed the design, UX decisions, and brand consistency. The jokes were AI-generated too, curated for maximum LOL density across tech, trading, dad jokes, and dark humor.

Prize Category

Best Google AI Usage — The OG social preview image was generated using Google's Gemini 3.1 Flash Image model via the Generative Language API. One prompt produced a production-ready branded image that matched the app's copper/dark aesthetic perfectly, no iteration needed.

DEV Community: Ralph Smith