css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

This cat is loooooooooooooooooooooooooooooong. Make her even longer by scrolling down! This concept is based on endless.horse. Plus, I included an achievement system for reaching certain lengths, and a banner will slide down from the top after each achievement.

Body Length Achievement
1000px Looooong
2000px Loooooooooong
5280px The Mile Stone
10000px Leviacat
15000px Catzilla
20000px Piercing the Clouds
25000px Catching the White Dots
35000px Catching Poptart Cats
99999px To Felinity and Beyond!


  • 2/15/17: Fixed gradient transparency issues in Safari, added wagging animation to tail
  • 2/22/17: Added length counter to better inform user about Longcat’s current length
  • 1/13/18: A recent Sass update broke a part of the code for the cat eye directions. Got it working again.


  1. This is so cool! Now, how to make it purr?

  2. SUPER CUTE!!!!!!!!!!!!!


  4. It's cool! Maybe animation for the tail?

  5. @iiRosie1 I just added it now. 😊

  6. Consider a linear gradient background to give the user some indication of how fast/slow their scrolling is going.

  7. so funny! nice!

  8. haha... this is also amazing... just as a heads up I noticed that the length kept bigger even if I scrolled back up longcat... Was using a mousewheel and on Vivaldi browser if it's of any help.

  9. what a magic tail, bro

  10. so cuuuuuuuuuuuuuuute 😻😻

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.