🎃 Halloween Edition 🎃

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🦇🎃

This is a submission for Frontend Challenge - Halloween Edition, CSS Art.

Inspiration

This challenge explores how far modern CSS—gradients, clip-path, filters, and custom properties—can carry an illustrative scene without raster assets or SVG. The objective was an accessible, performant nocturnal vignette with restrained motion that reads well across viewports and respects user preferences. Interactivity is deliberately minimal, serving theming and state transitions while keeping the composition and lighting the main focus.

Demo

Live demo: https://halloween-edition.vercel.app/

What I made

An accessible CSS‑first Halloween scene: glowing pumpkin with candle flicker, moon + stars, parallax hills, haunted house, animated bats, drifting fog, a witch flyby, a floating ghost, lightning “storm mode,” and a shooting star. JavaScript is used sparingly for small interactions and controls, and the scene respects prefers-reduced-motion.

Animations

Candle flicker: layered flames with offset keyframes
Stars twinkle: global opacity pulse
Bats: wing flaps + gentle horizontal loops
Fog: slow drifting bands for depth
Witch flyby: long, subtle parallax path
Ghost: buoyant bob with soft blur
Lightning: brief blend-mode flashes in storm mode
Shooting star: one-off diagonal streak

Journey

Process: sketched layers → semantic HTML scaffold → CSS variables for palette/timings → gradients/clip‑paths for shapes → fine‑tuned keyframes and easing → added tiny JS for controls.
Learned:
- Layering gradients and clip‑paths yields rich forms without images.
- CSS custom properties make live color theming trivial (pumpkin recolors on selection).
- Small flicker offsets sell “organic” motion more than big transforms.
- Accessibility scales: role="img" + label and aria-hidden on decor work well here.
Proud of: the spider drop + shooting star on pumpkin click—it’s a tiny, delightful surprise.

Challenges

Balancing motion and readability: kept movements subtle and added a global pause button.
Performance: avoided heavy filters; used small, layered effects and sparse DOM.
Minimal markup vs. expressive shapes: leaned on gradients, borders, and clip‑paths.