PARDON THE DUST

linux penguin typing gif

I got this book code from freefrontend (I want to make a little digital photobook). Eeehhhh why is everything horizontal nowwww bruhh what did i dooo :(

Me :]

little owl

๐Ÿš€ Core Features

๐Ÿ“š Book-like Page Flipping

Each "slide" or section of the book corresponds to a virtual page. The animation mimics a realistic flipping effect using sprite sheets and scroll-driven animations.


๐Ÿ”ง Technologies Used

  • Scroll Snap
  • View Timeline + Scroll Timeline
  • Sprite Sheets (mod, round)
  • Dynamic Sizing
  • Dynamic Sprite Calculation

๐Ÿง  Dynamic Behavior

All animations are automatically adjusted when changing the number of slides via the --slides variable. Frame

count, sprite layout, and total animation length adapt based on user-defined CSS variables. The animation is responsive to scroll progress using scroll-timeline and is scoped per element using timeline-scope.


๐Ÿ–ผ๏ธ Visual Layers

The book page uses a layered sprite system: One sprite sheet per page flip animation Positioned and animated via background-image The correct frame is selected based on scroll or button input


๐Ÿงช Browser Support

Requires Chrome 134+ for experimental CSS features like scroll-timeline, animation-timeline, ::scroll-button, and ::scroll-marker Best viewed with flags enabled or origin trials if needed

๐Ÿ“ฆ Use Cases

Digital storytelling
Visual novels
Portfolio presentations
Interactive learning materials


earworm
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis qui quibusdam suscipit unde velit veritatis vitae voluptas? Aliquid deleniti deserunt dolorem expedita id in iusto libero maiores minima molestiae natus non odio perferendis placeat provident quae quaerat qui quidem reiciendis, rem repellendus sit sunt tempore unde vero vitae voluptatum. Earum ipsum rem tempora voluptas? Debitis eaque, labore natus sit voluptatem voluptatum. Asperiores assumenda autem consequatur deleniti eligendi magnam natus nihil quidem repudiandae, soluta veniam voluptates. Eaque eveniet sed sunt voluptas.