Forem: ouzz

I Built a Liquid Glass Lens Effect in React Canvas

ouzz — Wed, 15 Apr 2026 10:24:48 +0000

I Built a Liquid Glass Lens Effect in React Canvas

I recently implemented a "liquid glass lens" post-processing effect in react-canvas, with three goals:

A clear magnification feel at the lens center
Strong glass-like distortion plus subtle chromatic dispersion near the rim
No second rendering stack, by fully reusing the existing CanvasKit pipeline

This article documents the implementation approach, key ideas, and the pitfalls I ran into.

Project and Live Demo

GitHub repository: https://github.com/ouzhou/react-canvas
Live demo: https://react-canvas-design.vercel.app/#/devto

Why Post-Process Instead of an Overlay Layer

At first, the most intuitive approach seemed to be adding another canvas or WebGL layer dedicated to the lens effect.\
But that introduces two major issues:

High synchronization cost between two render outputs (scrolling, zooming, and camera state must stay aligned)
Interaction picking can conflict with visual composition

So I chose a different route: full-screen post-processing within the same CanvasKit pipeline.

The flow is straightforward:

Render the full scene to an offscreen surface
Apply a SkSL RuntimeEffect to the offscreen image
Draw the processed result to the main canvas in one pass

Benefits of this design:

Scene logic is fully reused, with no need for a dual render tree
Effect control is centralized in shader code and uniforms
High compatibility with the existing rendering architecture

Breaking Down the Lens Effect

The current liquid glass lens consists of four parts:

Center magnification: clear enlargement inside the lens
Rim distortion: distortion concentrated near the outer ring
Chromatic dispersion (RGB offset): subtle color fringing at the edge to enhance the glass feel
Rim highlight + shadow: gives the lens a tangible physical presence

One key optimization I focused on:\
the center should magnify but not distort; distortion should be concentrated in the outer ~20% ring.

The implementation introduces a normalized radius t, then uses:

rim = smoothstep(0.8, 1.0, t) as the edge weight
Near-zero distortion weight at the center (t < 0.8)
Gradually increasing distortion and dispersion as t -> 1

Visually, this feels much closer to edge refraction of a real lens, instead of making the entire area wobble.

Animation and Performance: From Always Repainting to On-Demand Repainting

The lens is a pure uniform-driven post effect. Forcing a repaint every frame is simple, but unnecessarily expensive.\
I switched to an on-demand strategy:

On pointer movement, actively wake rendering via requestCanvasRepaint(canvas)
shouldContinueRepaint continues only while the lens is still chasing its target point
Continuous repainting stops automatically once the lens settles

This change significantly improved perceived performance: smooth while moving, no idle spinning when stopped.

Coordinate and Boundary Handling

On the web, coordinate mapping and edge sampling are the easiest places to make mistakes:

Convert pointer coordinates using getBoundingClientRect() plus backing-store scale
Clamp shader UV sampling with clamp(0..1) to avoid black edges or out-of-bounds artifacts

These details look minor, but they directly affect the final polish.

Key Takeaways

In visual effects, deciding where not to apply effects is often as important as deciding what to apply
For lens effects, a stable center plus expressive edges looks more natural than full-area distortion
Once the architecture is right (a unified post-process pipeline), iterative tuning becomes much cheaper

If you're building glass, depth-of-field, or color-grading effects in Canvas/Skia scenes, I strongly recommend starting with the "offscreen scene + RuntimeEffect" approach. It scales much better for future extensions.

Building the DEV Community Homepage with Pure Canvas

ouzz — Tue, 14 Apr 2026 08:35:24 +0000

Building the DEV Community Homepage with Pure Canvas

In modern frontend development, we are accustomed to building user interfaces with HTML and CSS. But have you ever wondered what it would be like to completely abandon the DOM tree and use pure Canvas to draw a complex modern web page (like the DEV Community homepage)?

In the react-canvas project, we took on a hardcore challenge: building the DEV Community homepage from scratch using a custom React renderer, powered by Skia (CanvasKit) and the Yoga layout engine.

🔗 Live Demo: https://react-canvas-design.vercel.app/#/devto

💻 GitHub Repository: https://github.com/ouzhou/react-canvas

preview

Unveiling the Tech Stack

To achieve this goal, we couldn't use the standard react-dom. Our underlying infrastructure includes:

CanvasKit (Skia WebAssembly): Serves as the underlying 2D graphics rendering engine, responsible for drawing all rectangles, text, images, and SVG paths.
Yoga Layout: A cross-platform Flexbox layout engine open-sourced by Facebook. Since Canvas itself has no concept of layout, we use Yoga to calculate the coordinates and dimensions of each element.
@react-canvas/react-v2: Our custom-built React renderer that maps the React component tree to the underlying rendering nodes.

Core Implementation Concepts

In the world of pure Canvas, there are no <div>, <span>, or <img> tags. Everything is a custom node.

1. Basic Component Mapping

We replaced traditional HTML tags with the basic components provided by react-canvas:

<div> -> <View>: Acts as the basic container, supporting Flexbox layout.
<span> / <p> -> <Text>: Used for text rendering, calling Skia's Paragraph API under the hood.
<img> -> <Image>: Used for rendering network images.
<svg> -> <SvgPath>: Used for rendering vector icons.
Scrollable areas -> <ScrollView>: Since Canvas has no native scrollbars, we have to handle scroll events and viewport clipping ourselves.

2. Canvas Initialization

We use CanvasProvider at the outermost layer to initialize the runtime and load the necessary fonts:

import { CanvasProvider, Canvas, View, Text } from "@react-canvas/react-v2";
import localParagraphFontUrl from "../assets/NotoSansSC-Regular.otf?url";

<CanvasProvider initOptions={{ defaultParagraphFontUrl: localParagraphFontUrl }}>
  {({ isReady, runtime }) => (
    <Canvas
      width={vw}
      height={vh}
      paragraphFontProvider={runtime.paragraphFontProvider}
      defaultParagraphFontFamily={runtime.defaultParagraphFontFamily}
    >
      {/* Page Content */}
    </Canvas>
  )}
</CanvasProvider>

3. Flexbox Layout & Styling

Thanks to Yoga, we can use Flexbox layout just like in React Native. All styles are inline JS objects rather than CSS classes:

// Example layout for the DEV top navigation bar
<View
  style={{
    width: vw,
    height: 56,
    backgroundColor: "#ffffff",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingLeft: 16,
    paddingRight: 16,
  }}
>
  {/* Logo and Navigation Items */}
</View>

4. Interactive States (Hover)

In the DOM, we typically use the :hover pseudo-class to handle mouse hover states. In react-canvas, the style property supports passing a function that receives the current interaction state:

<View
  style={({ hovered }) => ({
    padding: 16,
    backgroundColor: hovered ? "rgba(59, 73, 223, 0.1)" : "transparent", // Change background on hover
    cursor: "pointer",
  })}
>
  <Text style={({ hovered }) => ({ color: hovered ? "#3b49df" : "#404040" })}>
    Home
  </Text>
</View>

5. Drawing Details: Borders and Dividers

In traditional CSS, we can easily write border-bottom: 1px solid #e5e5e5. However, in our current custom renderer, support for single-sided borders is still being refined.

To draw perfect 1px dividers in Canvas, we use absolutely positioned <View> elements to simulate them:

// Simulating border-bottom
<View style={{ 
  position: "absolute", 
  bottom: 0, 
  left: 0, 
  right: 0, 
  height: 1, 
  backgroundColor: "#e5e5e5" 
}} />

The Final Result

By combining these basic capabilities, we successfully replicated the complex layout of the DEV Community homepage 1:1, including:

A fixed top navigation bar (with search box, icons, and the "Create Post" button).
A left sidebar with navigation links and social icons.
The main article feed (featuring the "What's on your mind?" input, tabs, and detailed article cards with nested comments).
A right sidebar with "Active discussions" and trending tags.

All rendering is done entirely within a single <canvas> tag!

Conclusion

Building complex Web UIs with pure Canvas is a fascinating exploration. While it loses the accessibility (A11y), SEO, and native text selection capabilities provided by the DOM, it offers ultimate rendering control and cross-platform consistency (the exact same code can easily be ported to native mobile apps or even desktop environments).

This is the core appeal of technologies like Flutter and React Native Skia. Through react-canvas, we've brought this "pixel-perfect control" experience to the Web.