Styles and effects for an animated website
Each effect is shown as the studio’s library renders it, on a background it filmed: what it brings, when to use it, and when to do without.
Textures
The film grain effect on a websiteWhat film grain does on a website, when to add it, at what intensity, and why it must stay still rather than flicker across the page.Vignetting effect on a website: darkening the edgesBringing the eye back to the center by pushing the edges into shadow: where vignetting comes from, when to use it on a site, how much, and how it is made.The halation effect: film glow on a websiteThe red glow that spills from the lights on film: where halation comes from, when to use it on a site, how much of it, and how to draw it in CSS.The scanline effect on a websiteThe fine lines of a cathode-ray screen laid over a web page: where the scanline effect comes from, when to choose it, how much, and how to draw it in CSS.The caustics effect: water light on a websiteThe threads of light dancing at the bottom of a pool, laid over a web page: where caustics come from, when to use them, and how to draw them in CSS.The halftone dot effect on a websiteThe printer’s dot grid laid over a web page: where halftone comes from, when to use it, how much of it, and how to draw it in CSS.Frosted glass effect on a website: frost in CSSBlurring the video behind the text, like frosted glass: where the frost effect comes from, when to use it, what backdrop-filter costs, and how it steps aside.The light leak effect on a websiteA flow of warm light coming in through a corner, as on fogged film: where the effect comes from, when to use it on a site, and how much of it to apply.The dust and scratches effect on a websiteFine vertical scratches and film dust across the whole page: where the effect comes from, which trades it suits, how much to apply, and what it costs.The paper texture on a websiteThe fiber of thick paper laid over the whole page: where the effect comes from, which trades it suits, how much to apply, and why it darkens the image.
Image and text treatments
The duotone effect on a websiteThe background turned to grayscale, then tinted in the site’s colors: where duotone comes from, when it serves a page, how much to apply, and how it is made.The chromatic aberration effect on a websiteThe red and cyan fringe of camera lenses, laid on a title: where the effect comes from, when it serves a site, how much, and why two shadows are enough.The neon glow effect on a websiteThe colored halo of a neon sign, around a title or a button: where the effect comes from, when it serves a website, and how much of it to apply.
Your site, filmed for your business
Describe your business and the scene of your background: the video is filmed for you, you build the page slice by slice, and the copy writes itself into it.
Create my site