Daily Challenge #4 : The “Infinite” Scroll Illusion 🎞️

It is February 16th. Today, we are playing with perception. Your task is to create a seamless, infinitely scrolling background or list—but there is a catch that might make your brain loop.

The Mission

Create a UI element that scrolls forever in one direction without the user ever seeing a “jump” or a “seam” where the loop restarts.

The Rules 🚫

1. NO JavaScript Allowed : You cannot use scroll, requestAnimationFrame, or any script-based positioning.
2. Pure CSS/HTML only : Use @keyframes and transform to handle the movement.
3. Perfect Loop : The animation must be perfectly seamless. If the user can see it “snap” back to the start, the illusion is broken!

The Goal 🏆

The content should move at a constant speed. Whether it’s a marquee of logos, a parallax starfield, or a list of items, it must look like a single, never-ending stream.

Pro Tip : Doubling your content and using a translateX(-50%) or translateY(-50%) trick is usually the cleanest way to hide the seam.

How to enter

Drop your CodePen or GitHub Repo in the comments!

• Bonus Points : If the scroll speed changes based on a CSS :hover state.
• Extra Credit : If you create a “Parallax” effect with multiple layers moving at different speeds.

Have fun!