Polygon morphing
Clip-path point sets tween between shapes, with images swapping at the midpoint.
3D and WebGL Templates · v1.0.0
Protean
Image panels morph between clip-path shapes on scroll.
Rated 4.6 out of 5 based on 27 reviews.440 sold1 variationUpdated September 20, 2026
01 / 04Click to enlarge
Clip-pathMorphScrollSplit text
Overview
Protean tweens image panels between clip-path polygons as you scroll, swapping the image mid-transition so one shape appears to dissolve into the next subject. Character-level text animation runs alongside it.
Because it is clip-path rather than WebGL, it is light, accessible and works everywhere - the organic feel comes from the easing and the polygon choice, not from a render pipeline.
Best for: Brand pages that want organic movement without the weight of a shader.
What makes it different
Self-hosted display face
AlphaLyrae ships with the template as an original webfont, alongside Inter.
Character text animation
Splitting.js drives per-character motion timed against the shape morph.
No WebGL dependency
Runs on anything that supports clip-path, which is everything current.
In the box
- 1 scroll morph page
- GSAP 3.15 + ScrollTrigger + Splitting.js + Lenis, vendored
- AlphaLyrae original webfont + self-hosted Inter
- 15 sample images
Built with
- GSAP 3.15
- ScrollTrigger
- Splitting.js
- Lenis
Questions about Protean
Can I define my own shapes?
Yes. Shapes are arrays of polygon points in one file; keep the point counts equal between states and they tween cleanly.
Why is this filed under 3D?
Honestly, it sits between categories - the morphing reads as dimensional even though the technique is 2D.
Still unsure? Email us - or read how to choose a template.
Related
