Right now our browser can only draw colored rectangles and text—pretty boring! Real browsers support all kinds of visual effects that change how pixels and colors blend together. To implement those effects, and also make our browser faster, we’ll need control over surfaces, the key low-level feature behind fast scrolling, visual effects, animations, and many other browser capabilities. To get that control, we’ll also switch to using the Skia graphics library and even take a peek under its hood.
Animating and Compositing | Web Browser Engineering
Complex web applications use animations when transitioning between states. These animations help users understand the state change and they improve visual polish by replacing sudden jumps with gradual changes. But to execute these animations smoothly, the browser must minimize time in each animation frame, using GPU acceleration to speed up visual effects and compositing to minimize rendering work.
Whimsical Animations
Learn how to create charming interactions and delightful touches using the magic of CSS, JavaScript, SVG, and Canvas. I’m sharing all my tricks in this one!
Shaders
Component library for creative WebGPU effects in modern frontend frameworks. Compose interactive visuals for Vue, React, Svelte and Solid.
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile
Firefox OS, Animations & the Dark Cubic-Bezier of the Soul – Mozilla Hacks - the Web developer blog
I’ve been using Firefox OS daily for a couple of years now (wow, time flies!). While performance has steadily improved with efforts like Project Silk, I've often noticed delays in ...
Supporting Embedded Content | Web Browser Engineering
While our browser can render complex styles, visual effects, and animations, all of those apply basically just to text. Yet web pages contain a variety of non-text embedded content, from images to other web pages. Support for embedded content has powerful implications for browser architecture, performance, security, and open information access, and has played a key role throughout the web’s history.
Chrome for Developers (@developer.chrome.com)
After 12 years, Scroll-Driven Animations are officially Baseline Newly Available 🎉 Pure CSS scroll-driven animations work across every major browser engine! Celebrate this milestone with our animated timeline tracing the feature's history since 2014 → goo.gle/3Urm9fT
Bringing Microsoft Internet Explorer’s proprietary “Interpage Transitions” back to Modern Browsers using the View Transition API
Back in late 2024, I started working on a fun end-of-year side project named ie-page-transitions. It”s a CSS + JS library that brings back Microsoft Internet Explorer’s proprietary “Interpage Transitions” to modern browsers, powered by the View Transition API. After sitting unfinished for a while, I finally got all 23 classic effects over the finish line and published the project on page-transitions.style.
Bringing Microsoft Internet Explorer’s proprietary “Interpage Transitions” back to Modern Browsers using the View Transition API
Back in late 2024, I started working on a fun end-of-year side project named ie-page-transitions. It”s a CSS + JS library that brings back Microsoft Internet Explorer’s proprietary “Interpage Transitions” to modern browsers, powered by the View Transition API. After sitting unfinished for a while, I finally got all 23 classic effects over the finish line and published the project on page-transitions.style.
Thousands of Styled Rectangles in 120FPS on GPU
Secrets of rendering extremely fast UIs in WebGPU by minimizing overhead on the GPU.
swup — Versatile and extensible page transition library for server-rendered websites
Versatile and extensible page transition library for server-rendered websites
Canvas Cycle: True 8-bit Color Cycling with HTML5
CSS Scroll Snap | 12 Days of Web
Tips, tricks and grab-n-go demos for elegant and well-orchestrated scroll experiences.
WebKitGTK 2.54 highlights - The WebKitGTK Project
The WebKit team at Igalia is happy to announce a new release series of WebKitGTK. The main highlight of this release is a new web process compositor built on the Skia graphics library, replacing the TextureMapper-based one. Read on for the details, along with a summary of the other most noteworthy changes from the latest release cycle.
@eva.town hi! I really like what you did with hypertext.tv - how did you create that old school pixelated effect?
Hypertext TV
hypertext.tv