gitwtfhub

wtf is liquid_prnc_glass?

i4w7w4a/liquid_prnc_glass — explained in plain English

Analysis updated 2026-05-18

45TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TL;DR

A browser lab for creating a realistic glass-refraction visual effect on video and images using GPU shaders.

Mindmap

mindmap
  root((repo))
    What it does
      Glass refraction effect
      GPU shader based
      Video and image support
    Tech stack
      React
      TypeScript
      WebGL
      GLSL
      Three.js
    Controls
      Refraction strength
      Color dispersion
      Edge darkening
      Flow animation
    Export
      Live recording
      Frame by frame render
    Audience
      Developers
      Creative coders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Why would anyone build with this?

REASON 1

Apply a real optical glass-refraction effect to a video or image directly in the browser.

REASON 2

Tune parameters like refraction strength, color dispersion, and edge darkening interactively.

REASON 3

Export the finished effect as a recorded video or a precise frame-by-frame render.

REASON 4

Copy the generated Markdown summary of settings to reuse the effect in another project.

What's in the stack?

TypeScriptReactWebGLGLSLThree.js

How it stacks up

i4w7w4a/liquid_prnc_glassqunabu/gravity0xbennie/binance-smart-money-tracker
Stars454544
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity3/53/53/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you spin it up?

Difficulty · moderate Time to first run · 30min

Requires installing dependencies with npm and starting a local dev server, or use the hosted live version.

Wtf does this do

Liquid Prnc Glass is a browser-based laboratory for producing and tuning a specific visual effect: optical glass refraction applied to the edges of a video or image. The effect makes it look as though the content is being viewed through a piece of curved glass, with light bending and colors separating around the borders. The README is explicit that this is not a CSS blur or filter trick, the effect comes from custom GPU shader code that actually simulates how light refracts. The project is built with React and TypeScript and runs in the browser using WebGL, which is a browser standard for running graphics programs on the GPU. The shader is written in GLSL, which is the language used to write programs that run directly on graphics hardware. Three.js, a popular JavaScript library for 3D graphics, handles the rendering pipeline. A video or image is uploaded as a texture to the GPU, and the GLSL code bends the pixels around the edges according to the settings you choose. The lab interface exposes a detailed set of controls for tuning the appearance. These include parameters for refraction strength, edge width, corner roundness, color dispersion (the separation of red, green, and blue channels, which mimics how real glass splits light), edge darkening, and highlights. There are also flow controls that add animated movement to the effect over time. Once you have the settings tuned the way you want, the lab offers two export options. You can record the live canvas directly as it plays, or use a more precise rendering path that builds the video frame by frame using browser video encoding tools for a deterministic result. There is also a feature that generates a Markdown document summarizing the settings and how to copy the effect component into another project. To run it locally, you install dependencies with npm and start the development server. A live version is available online at liquid-prince.online.

Yoink these prompts

Prompt 1
Explain how GLSL shaders simulate glass refraction instead of using a CSS blur filter.
Prompt 2
Walk me through tuning color dispersion and edge darkening in this lab's interface.
Prompt 3
Show me how to export a video using the frame-by-frame rendering path.
Prompt 4
Help me copy this refraction effect component into my own React project.

Frequently asked questions

wtf is liquid_prnc_glass?

A browser lab for creating a realistic glass-refraction visual effect on video and images using GPU shaders.

What language is liquid_prnc_glass written in?

Mainly TypeScript. The stack also includes TypeScript, React, WebGL.

How hard is liquid_prnc_glass to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is liquid_prnc_glass for?

Mainly developer.

View the repo → Decode another repo

This repo across BitVibe Labs

Don't trust strangers blindly. Verify against the repo.