Weekly Challenge #6 : The CSS Optical Illusion 🔮

Today is the 8th, and although I am a day late, we’re rolling into Weekly Challenge #6 — something a little trippy, a little brain‑melting, and very fun to build.

This week, your mission is to create a CSS‑only optical illusion.

No JavaScript.

No canvas.

Just pure CSS wizardry.

Think of those illusions where your brain goes:

“Wait… is that moving?

Is that rotating?

Is that… even possible?”

Yeah. That.

---

The Mission

Build an illusion that:

• looks impossible
• moves or shifts even when it’s not actually moving
• tricks the eye using patterns, gradients, shapes, or perspective
• is powered entirely by CSS

It can be subtle or chaotic — your choice.

---

The Rules

• No JavaScript
• Must visually “trick” the viewer
• Must use at least one of the following:
  • repeating patterns
  • gradients
  • perspective transforms
  • animation timing illusions
• Must be interactive or animated
• Must be shareable in a CodePen or GitHub link

---

The Goal

Make people stare at it for 10 seconds and go:

“…bro what.”

If someone questions reality for even a moment, you’ve succeeded.

---

Bonus (if you wanna go wild)

• Make the illusion change on hover
• Add a theme (retro, neon, sci‑fi, geometric, etc.)
• Use only one HTML element
• Make it look like it’s rotating even though it’s not

---

Hints (only 3)

🔹 1. Repeating gradients are your best friend

CSS gradients can create wild illusions when repeated or angled just right.

---

🔹 2. Slow animations feel more “real”

Try easing curves like:

animation-timing-function: cubic-bezier(.25, .1, .25, 1);

It makes movement feel natural — which makes the illusion stronger.

---

🔹 3. Perspective + transform = instant mind trick

Even a simple:

transform: perspective(400px) rotateX(20deg);

can make flat shapes look 3D.

---

How to Enter

Just drop your CodePen or GitHub link in the comments.

That’s literally it.

No deadlines, no pressure — just build something cool and share it.

---

Alright, that’s the challenge

Go make something that breaks people’s brains (in a good way).

Make it weird. Make it trippy. Make it yours.

And if you want a shoutout in next week’s challenge…

you know what to do.