Skip to content
Swift

Scroll Effect Templates · v1.0.0

Prism

SVG turbulence that warps imagery as it enters the viewport.

Rated 4.6 out of 5 based on 38 reviews.610 sold7 variationsUpdated September 20, 2026
01 / 04Click to enlarge
Screenshots of the Prism template: SVG turbulence that warps imagery as it enters the viewport.
SVG filtersDistortionScrollGSAP Flip

Overview

Prism drives SVG feTurbulence and feDisplacementMap filters from scroll position, so images and type distort as they arrive and resolve as they settle. Seven content sections each use a different displacement profile.

It is a genuinely unusual look - the distortion is computed by the browser's filter pipeline, not faked with transforms, so it warps content organically rather than sliding it around.

Best for: Music, fashion and event sites that want texture rather than polish.

What makes it different

1

Scroll-linked displacement

Filter scale maps to scroll progress, so the warp intensifies and releases as you move.

2

Seven displacement profiles

Different turbulence frequencies and octaves per section.

3

Flip-based relayout

Titles reposition with GSAP Flip between states, warping as they travel.

4

Editable filter source

The SVG filter defs are plain markup - change the numbers, change the texture.

In the box

  • 1 page with 7 filter sections
  • GSAP 3.15 + Flip + ScrollTrigger, vendored
  • Self-hosted Inter and Syne
  • Editable SVG filter definitions
  • 7 sample images

Built with

  • GSAP 3.15
  • Flip
  • ScrollTrigger
  • SVG filters

Questions about Prism

Is this expensive to render?

SVG filters are GPU-accelerated in current browsers but not free. It is tuned for full-page use; stacking a dozen simultaneously would not be.

Does it degrade safely?

Yes. Without filter support the content renders undistorted and the layout is unaffected.

Still unsure? Email us - or read how to choose a template.

Related

You might also consider

Monolith template - One element carries an entire scrolling story.61% off

Monolith

$38$15

One element carries an entire scrolling story.

ScrollRated 4.9 out of 5 from 58 reviews.
Drift template - A gallery that morphs between nine layout arrangements.50% off

Drift

$32$16

A gallery that morphs between nine layout arrangements.

ScrollRated 4.8 out of 5 from 55 reviews.
Formation template - Image grids that assemble into twenty different arrangements.45% off

Formation

$38$21

Image grids that assemble into twenty different arrangements.

ScrollRated 4.8 out of 5 from 47 reviews.