Effect guides
Visual effects for websites, explained with code
12 effects people search for by name, from starfield backgrounds to metaballs. Each guide explains how the effect works, gives a short starter in plain HTML, CSS or canvas that you can paste and run, and names the Lookbk skills that build a finished version with your copy and colors.
Pick an effect
Every starter is written for these pages and free to use. Every sentence about a skill is read from the skill itself.
HTML starter · 2 skills
Starfield background for a website
Build an animated starfield background for a website: how the 3D projection works, a 30-line canvas starter, and agent skills for a finished space hero.
HTML starter · 2 skills
Glitch effect for websites
How the digital glitch effect works, from RGB split text in CSS to real pixel sorting, with a starter you can paste and agent skills for a glitch hero.
HTML starter · 3 skills
Glassmorphism: the frosted glass effect
What glassmorphism is, the CSS backdrop-filter recipe for a frosted glass card, what to get right on contrast, and agent skills for glass heroes and decks.
HTML starter · 2 skills
Kinetic typography for video and the web
Kinetic typography explained: how moving type is timed, a JavaScript starter for an animated headline, and agent skills for title drops and type posters.
HTML starter · 2 skills
Metaballs: blobs that melt into each other
How metaballs work: the field function and threshold behind gooey, merging blobs, a canvas starter, and agent skills for lava lamp and liquid metal heroes.
HTML starter · 1 skill
CRT effect: an old monitor on a modern page
Recreate a CRT screen on the web: scanlines, phosphor glow, flicker and curvature, with a CSS starter and an agent skill for an animated retro terminal hero.
HTML starter · 1 skill
Mesh gradient backgrounds
Make a mesh gradient background in CSS, add film grain for the grainy gradient look, try a free generator, and get an agent skill for an animated mesh hero.
HTML starter · 1 skill
Topographic pattern backgrounds
Generate a topographic contour line pattern for a website background: how contour lines are traced from a height map, a canvas starter and a map hero skill.
JS starter · 2 skills
Halftone effect: print dots on screen
How the halftone effect turns tones into dots, a canvas starter that halftones any image, and agent skills for a screen-print hero and risograph quote cards.
HTML starter · 1 skill
Aurora background for a website
Make an aurora background for a website, from blurred CSS color blobs to real northern lights curtains in WebGL, with a starter and a night-sky hero skill.
JS starter · 1 skill
Confetti animation in JavaScript
Make a confetti animation with real physics: launch, drag, gravity and flutter in a short canvas starter, plus an agent skill for a looping confetti hero.
JS starter · 1 skill
ASCII animation for the web
How ASCII animation works: map brightness to a character ramp, a JavaScript starter that turns any image or video into text, and an ASCII hero skill.