fisheye-motion

Original：🇨🇳 Chinese

Translated

Create screen-photo-style fisheye distortion effects and focus animations: barrel fisheye distortion + fine scanline/moiré interference + edge vignette, with Remotion video output for any image or video using a “push-in focus onto a target + yellow annotation block sliding in” effect. The core workflow is to clone the https://github.com/vibe-motion/fisheye-motion project, adjust parameters as needed, and render. Trigger words: fisheye, screen capture, moiré, moire, scanline, CRT, vignette, focus push-in, highlight annotation animation, screen-photo effect.

4installs

Sourcevibe-motion/skills

Added on2026-10-19

NPX Install

npx skill4agent add vibe-motion/skills fisheye-motion

SKILL.md Content (Chinese)

View Translation Comparison →

Fisheye Motion (Fisheye Distortion + Moiré + Vignette)

Turn an image (or video) into the feel of “photographing a screen with a phone”: barrel fisheye distortion centered on the focus point, scanlines that follow the curvature of the image interfering with fixed screen scanlines to create moiré, and vignetting around the edges. It can also output a Remotion video featuring a “push-in focus onto a target area + yellow annotation block sliding in from the left.”

Workflow

This skill does not include code; all implementations reside in a standalone repository. The first step is always to clone the project:

bash

git clone https://github.com/vibe-motion/fisheye-motion.git
cd fisheye-motion

Repository structure:

Root directory: Vite + React interactive test app (drag an image, click/drag to reposition the focus, export PNG)
```
src/lib/FisheyeRenderer.js
```
: framework-agnostic WebGL renderer (the core; all effect shaders are here)
```
src/lib/FisheyeView.jsx
```
: React component wrapper
```
vibe-motion-app/
```
: Remotion project that outputs focus push-in + annotation slide-in videos

Then follow one of two paths depending on the requirements.

Path A: Static Effects / Interactive Preview (Vite App)

bash

npm install
npm run dev

Loads
```
public/test.jpg
```
by default; place the user's image in
```
public/
```
or drag it directly onto the page.
Click/drag the image to change the focus (distortion center); “Export PNG” saves the current effect frame.
To reuse it in your own React project, copy the two files in
```
src/lib/
```
directly; see the repository README for usage.

Path B: Video Output (Remotion Project)

bash

cd vibe-motion-app
pnpm install          # postinstall 自动准备 headless 浏览器
pnpm run dev          # Remotion Studio 预览

Place the user's source image under
```
vibe-motion-app/public/
```
.
Modify
```
motion/config.js
```
:
- ```
imageSrc
```
  : filename under
```
public
```
- ```
videoWidth
```
  /
```
videoHeight
```
  : even dimensions proportional to the source image's aspect ratio
- ```
focusFrom
```
  →
```
focusTo
```
  : starting and ending points of the focus push-in (0..1 source-image coordinates, with y pointing downward)
- ```
rect
```
  : annotation block position
```
{ x, y, w, h }
```
  (0..1 source-image coordinates), color, and blend mode
- Timeline:
```
focusStartSec/focusEndSec
```
  (push-in segment),
```
maskStartSec/maskEndSec
```
  (annotation slide-in segment), and
```
durationSeconds
```
Render:

bash

# 透明 ProRes 4444 mov（默认）
pnpm run remotion:render

# H.264 mp4
REMOTION_OUTPUT=out/fisheye.mp4 REMOTION_CODEC=h264 REMOTION_PIXEL_FORMAT=yuv420p pnpm run remotion:render

When a GIF preview is needed, convert it with ffmpeg:

bash

ffmpeg -i out/fisheye.mp4 -vf "fps=15,scale=540:-1:flags=lanczos,palettegen" /tmp/p.png
ffmpeg -i out/fisheye.mp4 -i /tmp/p.png -lavfi "fps=15,scale=540:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=4" out/fisheye.gif

Locating the Target Area (rect / focusTo)

Users will typically say “focus on the XX text/button.” To locate it:

Use multimodal vision to inspect the source image and estimate the target area's normalized coordinates (0..1, with y pointing downward).
Set
```
focusTo
```
to the center of that area; use
```
rect
```
to enclose the target, leaving a little padding.
Render a frame for inspection (drag the timeline in Studio, or use
```
REMOTION_OUTPUT=out/check.png
```
with single-frame rendering). If it is inaccurate, adjust the coordinates and try again. Distortion bends the image, so the final rendered result is authoritative.

Parameter Quick Reference

Parameter	Default	Description
`strength`	1.6	Distortion strength; 0 = no distortion, `p' = p·(1 + strength·r²) / zoom`
`zoom`	2	Center zoom (used with the focus push-in)
`moire`	`{ intensity: 0.28, scale: 900, angle: 0 }`	Moiré intensity/frequency/angle
`vignette`	`{ amount: 0.85, radius: 0.72, softness: 0.45 }`	Vignette
`rect.blend`	`screen`	Use `screen` for white text on a dark background; use `multiply` for dark text on a light background (highlighter effect)

Notes

Remotion renders frames in parallel and out of order, so animation values must be calculated independently for every frame. This is already guaranteed by
```
motion/timeline.js
```
; preserve this constraint when changing the animation logic and do not introduce cross-frame state.
Scenes use a WebGL shader, and headless rendering requires
```
--gl angle
```
. The rendering script sets this by default.
For visual effects, avoid running automated validation unless necessary. Visually inspect the result after rendering, or send keyframes to the user for confirmation.

Example

Focus push-in onto the “Zhejiang University” text and slide in a yellow annotation (

assets/fisheye-demo.gif

):

fisheye-motion

NPX Install

Tags

SKILL.md Content (Chinese)

Fisheye Motion (Fisheye Distortion + Moiré + Vignette)

Workflow

Path A: Static Effects / Interactive Preview (Vite App)

Path B: Video Output (Remotion Project)

Locating the Target Area (rect / focusTo)

Parameter Quick Reference

Notes

Example