JAEN
Start a project

EFFECTS SHOWCASE · 26 EFFECTS

KEYAKILAB

A showcase of effects. WebGL, 3D, scroll-driven motion and pointer effects: everything we can do right now, on one page. Touch it, scroll it, try it.

See the effectsTalk to us about this
effects
26
categories
5
external libraries
0
  • WEBGL
  • SHADER
  • 3D
  • PARALLAX
  • TYPOGRAPHY
  • POINTER
  • SCROLL
  • CANVAS
  • MOTION
  • SVG

01 / BACKGROUNDS

Backgrounds

Moving backdrops that set the mood: from GPU shaders to plain CSS.5

Move your cursor over this

01

WebGL mesh gradient

Domain-warped fbm noise rendered by a raw WebGL fragment shader. The light follows your cursor.

WebGLGLSLTouch: the light drifts on its own · Reduced motion: one still frame · No WebGL: CSS gradient

02

Aurora

Blurred blobs of colour drifting slowly, in pure CSS.

CSSReduced motion: still

03

Particle network

Dots drift and link to their neighbours; the pointer pulls them in.

Canvas 2DTouch: an invisible finger wanders · Stops off screen · Reduced motion: still

The grid only appears around the pointer

04

Grid spotlight

A faint grid that only shows around the pointer.

CSS maskTouch: follows your finger while dragging

With grain

05

Film grain

An SVG noise layer that gives flat surfaces some texture.

SVG filterStatic, so nothing to change

02 / TYPOGRAPHY

Typography

Effects on the letters themselves, without costing readability or screen-reader access.5

KEYAKI CREATE
06

Text decode

Random glyphs settle into the real text, left to right.

rAFTouch: plays on view and on tap · Reduced motion: real text from the start

Built in Sendai.

07

Letter-by-letter rise

Letters lift out of a mask one after another, for headlines.

CSS transitionReduced motion: shown from the start

SHIMMER
08

Shimmering gradient text

A band of light sweeps across the text.

CSSReduced motion: still

  • DESIGN
  • BUILD
  • MOTION
  • SHIP
  • Sendai
  • Websites
  • Creative
  • Systems
09

Infinite marquee

A seamless sideways loop. Hover to pause.

CSSTouch: always moving · Reduced motion: stopped

TOUCH THE TYPE
10

Letters that dodge the pointer

Letters are pushed away as the cursor nears, then spring back.

Pointer EventsTouch: the letters wave · Reduced motion: still

03 / POINTER

Pointer

Effects that answer the mouse. Touch devices get an alternative of their own.5

Move around inside this area

11

Custom cursor

A ring that eases after the pointer and grows over interactive things.

rAFPointer EventsTouch: hidden (there is no cursor)

12

Magnetic button

The button is drawn towards the pointer as it approaches.

Pointer EventsTouch: a normal button that shrinks when pressed

KEYAKI

3D
TILT

13

3D tilt card

The card leans under the pointer and a glare moves across it.

CSS 3DTouch: a slow idle sway · Reduced motion: still

WebGL

Backgrounds drawn on the GPU. Noise and a shader alone can give photographic depth.

Canvas

Draw particles and lines freely. Light enough for data visualisation, too.

CSS

Most motion needs nothing more. Light, hard to break, easy to switch off.

14

Spotlight borders

A card's border lights up where the pointer is.

CSS maskTouch: the top edge stays softly lit

15

Ripple

A wave spreads from the exact press point, for mouse, touch and pen.

Pointer EventsReduced motion: vanishes instantly

04 / SCROLL

Scroll

Things that move or appear as you scroll.5

A thin line at the very top of the screen shows how far you have read.

16

Scroll progress bar

The thin line at the very top of this page shows how far you have read.

scrollrAFReduced motion: unchanged (it only shows position)

1,234

* A demo number

17

Count-up

Numbers count up the moment they come into view.

rAFReduced motion / no JS: the final value from the start

18

Layered parallax

Stacked images move at different speeds as you scroll past.

scrolltransformReduced motion: still

A bright hair salon interior (sample image)
20

Clip-path wipe

An image is revealed like a curtain being drawn.

clip-pathReduced motion / no JS: shown from the start

19

Pinned horizontal gallery

Scroll down and the pinned images slide sideways. All images are design samples.

Reduced motion: it becomes a normal row you swipe sideways.

Mechanical chronometer 3D model

Mechanical chronometer 3D model

3D interactive

Set-meal restaurant website

Set-meal restaurant website

Sample website

Daily special banner

Daily special banner

Banner

Hair salon website

Hair salon website

Sample website

Hair-care flyer

Hair-care flyer

Flyer

Autumn sale banner

Autumn sale banner

Banner

05 / UI & MOTION

UI & motion

Cards, comparison, drawing and 3D: motion you can use as components.6

A zelkova branch in dappled sunlight. Before on the left, after on the rightBEFOREAFTER
21

Before / after

Drag the divider to compare. Arrow keys work too.

input rangeTouch and keyboard work as they are

22

SVG path drawing

Lines that draw themselves.

SVGReduced motion / no JS: already drawn

23

Morphing blob

A gradient shape whose outline never stops changing.

CSSReduced motion: still

Glass card

The motion behind it blurs through. The text stays crisp.

24

Glass card

A frosted panel over a moving backdrop.

backdrop-filterIf the backdrop stops, the card is calm too

Mechanical chronometer 3D model
Set-meal restaurant website
Daily special banner
Hair salon website
Hair-care flyer
Autumn sale banner
25

3D ring

Cards turning in a real 3D ring. Hover to pause.

CSS 3DTouch: always turning · Reduced motion: stopped

  • WebGL

    Drawn on the GPU

  • 3D

    CSS perspective

  • Scroll

    Linked and pinned

  • Typography

    Directing the letters

26

Bento grid

Tiles of different sizes that lift on hover.

CSS gridTouch: reacts while pressed

Want this motion
on your site?

Effects are a means, not the goal. We pick only the motion that makes your message land, and build it light and easy to switch off. Tell us about your project.

Start a project