ripple - GitLite

KO | EN

gitlite — search

#svg #ios #self-hosted #awesome-list #java #large-language-models #security #openai #dotnet #swift

ripple

(★ 56)

A wavy, rippling distortion transition that dissolves one photo into another — a glowing, noise-warped GLSL/WebGL wavefront with live controls. Inspired by Minsang (@radiofun8).

파일 탐색기

ZIP 다운로드

- CLAUDE.md
- launch.json
- image-a.png
- image-b.png
- - Controls.css
  - Controls.tsx
  - rippleParams.ts
  - RippleTransition.tsx
- App.css
- App.tsx
- index.css
- main.tsx
.gitignore
eslint.config.js
index.html
LICENSE
package-lock.json
package.json
README.md
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts

# CDN으로 사용하기

jsDelivr

jsDelivr는 공개 GitHub 리포지토리를 별도 설정 없이 CDN으로 즉시 서빙합니다. 버전과 파일을 고르면 웹페이지에 바로 붙일 수 있는 링크와 예시 코드가 만들어집니다.

버전

파일

링크

예시

명령어 용어집

이 문서에서 사용된 명령어를 모아봤습니다. 낯선 명령어가 있다면 펼쳐서 확인해보세요.

🔍

`npm install`

설명 보기 ▼

Install Node packages.

npm {{[i|install]}}

Install dependencies listed in `package.json`:

npm {{[i|install]}} {{package_name}}@{{version}}

Download a specific version of a package and add it to the list of dependencies in `package.json`:

npm {{[i|install]}} {{package_name}} {{[-D|--save-dev]}}

Download the latest version of a package and add it to the list of dev dependencies in `package.json`:

🔍

`npm run`

설명 보기 ▼

Run a script.

npm run

List available scripts:

npm run {{script_name}}

Run a script:

npm run {{script_name}} -- {{argument}} {{--option}}

Pass arguments to a script:

🔍

`progress`

설명 보기 ▼

실행 중인 coreutils의 진행 상태를 표시/모니터링.
더 많은 정보: <https://github.com/Xfennec/progress>.

progress

실행 중인 coreutils의 진행 상태 표시:

progress {{[-m|--monitor]}}

조용한 모드로 실행 중인 coreutils의 진행 상태 표시:

progress {{[-q|--quiet]}}

단일 장기 실행 명령을 시작하고 모니터링:

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

A wavy, rippling distortion transition that sweeps out from wherever you tap and
dissolves one photo into another — a glowing, noise-warped wavefront with
chromatic fringing, recreated for the web and tunable live from a floating
control panel until it looks exactly the way you want.

<img width="800" height="884" alt="Screen Recording 2026-05-30 at 1 45 27 AM (1)" src="https://github.com/user-attachments/assets/e77ae880-c8ca-4adc-93e6-273976289f0d" />

Inspired by [**Minsang** (@radiofun8)](https://x.com/radiofun8)'s "Ripple with
Noise" Metal shader. This is a fresh implementation in **GLSL / WebGL** with
**GSAP** driving the animation — significantly altered from the original, but
the idea is his. Full credit below.

## What it is

Press anywhere on the image and a ripple expands from that point: a turbulent,
cloud-like glowing band races outward, displacing and color-splitting the pixels
at its edge, and behind it the photo dissolves into a second one. Press again and
it transitions back the other way — it never restarts or snaps, it just reverses.
The press also pokes a soft dimple into the sheet at the contact point.

All the heavy lifting runs on the GPU in a single fragment shader on a
full-screen quad. GSAP animates one `progress` uniform from 0 → 1; the shader
does the rest.

## The transition, technically

- **Wavefront** — the distance from the tap point is compared against an
  expanding radius (`progress × coverage`, where `coverage` is auto-derived from
  the canvas so the sweep always finishes by the end). A Gaussian envelope around
  that radius defines the active band; a cosine term inside it adds the ripples.
- **Noise warp** — two layered cartesian FBM fields (value-noise, Hermite
  smoothing) perturb the distance field so the front breaks into organic cloud
  lobes instead of a clean ring. The warp amplitude ramps in over the first few
  percent of progress, so the effect starts as a small clean seed and only
  develops turbulence as it grows.
- **Displacement** — pixels on the band are pushed radially outward, giving the
  melted, burning-edge look.
- **Chromatic aberration** — the R, G and B channels are sampled at slightly
  different offsets along the wavefront, producing the rainbow split.
- **Color-dodge glow** — the band is blown toward white with a dodge blend,
  creating the hot, smoky edge.
- **Two-image ping-pong reveal** — behind the wavefront the base image is mixed
  into the target image. A `swap` flag flips base/target each time a transition
  completes, so successive presses alternate A→B, B→A, … seamlessly.

The wavefront fully dies out by the end of each run, so no distortion lingers on
the settled image.

## Live controls

A collapsible, shadcn-style panel (top-left) tunes every uniform in real time,
plus a progress scrubber to freeze and step through any frame of the animation.
Hit the **✕** to collapse it into a small "Controls" pill, and tap the pill to
bring it back. The whole layout is responsive — on mobile the panel caps its
width to the viewport and the image is centered and sized to fit.

| Control | What it does |
| --- | --- |
| **Transition Speed** | How fast the whole transition plays (right = faster). |
| **Wave Width** | Thickness of the Gaussian band the glow and displacement ride on. |
| **Ripple Density** | Number of cosine ripples inside the band. |
| **Displacement** | How hard pixels are pushed at the wavefront. |
| **RGB Split** | Strength of the chromatic aberration. |
| **Glow** | Intensity of the white color-dodge burn. |
| **Noise Warp** | How turbulent / non-circular the front is. |
| **Easing** | GSAP easing curve for the `progress` tween. |
| **Pinch** | Toggles the soft dimple poked in at the press point (on by default). |
| **Pinch Intensity** | How deep that dimple presses in. |
| **Progress** | Manually scrub progress 0 → 1 to inspect any frame. |

## Try it locally

```bash
npm install
npm run dev        # http://localhost:3000
```

Press the image to fire the transition; tune it with the panel in the top-left.

Swap in your own photos by replacing `public/image-a.png` and
`public/image-b.png`.

> **Images:** the placeholder photos (`image-a.png`, `image-b.png`) are
> demo images found on Pinterest. Copyright belongs to the original
> creators — I do not own them, and they are included for demonstration
> purposes only.

## Built with

- **React + TypeScript + Vite**
- **WebGL** (raw — no three.js / R3F / OGL), single fragment shader
- **GSAP** for the progress tween

## Credit

The original "Ripple with Noise" effect is by **Minsang
([@radiofun8](https://x.com/radiofun8))**, written as a Metal shader. This
project is inspired by and recreated from that work — thanks for sharing it.