---
title: "BulgeDistortion — Framer component · Best of Framer"
description: "$8.00 · Framer component · by 9dm · Effects. What it does BulgeDistortion applies a GPU-accelerated WebGL bulge effect to any image."
canonical: "https://framer.elliotli.dev/component/bulgedistortion"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/BulgeDistortion

# BulgeDistortion

WebGL bulge reveal · GPU-accelerated

[View on Framer](https://framer.com/marketplace/components/bulgedistortion/?via=elliot-li)

![BulgeDistortion preview image 1](https://framer.elliotli.dev/og/component/bulgedistortion/0bfc81089f04173f/1600x1200.jpg)

## Summary

What it does BulgeDistortion applies a GPU-accelerated WebGL bulge effect to any image.

## Description

### What it does

BulgeDistortion applies a GPU-accelerated WebGL bulge effect to any image. When the thumbnail enters the viewport it starts in a distorted state and smoothly relaxes back to its natural form — replicating the exact easing that happens when a mouse lifts off a hovered card.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8u55b8dz-Gq4UXDfKlbaLCQcX2GEtkZGpJo459f)

### Features

-   WebGL shader distortion with expo.out easing — the original Codrops curve
    
-   Scroll-triggered reveal with threshold, stagger, and replay on revisit
    
-   Hover interaction — cursor-tracked bulge that relaxes on mouse leave
    
-   Click / tap distort — great for touch devices
    
-   UV Zoom — texture zooms in sync with the bulge
    
-   Grayscale → color transition on reveal
    
-   Hover tint overlay for duotone-style effects
    
-   Image fit: Cover, Contain, or Fill
    
-   8 CSS entry presets: Fade, Slide Up, Zoom In, Tilt In, Float Up and more
    
-   Shared animation loop — one rAF drives all instances, stays fast with 6+ cards on screen
    
-   Pauses automatically when the browser tab is hidden
    
-   Respects prefers-reduced-motion
    
-   Shows the real image in the Framer canvas and on export
    

### How to use

1.  Go to **Assets → Code → New File**
    
2.  Paste the component code and save
    
3.  Drag **BulgeDistortion** onto any frame
    
4.  Assign an image and configure in the right panel
    

### Controls

Initial bulge · Intensity · Falloff radius · Focus X / Y · Settle duration · Easing · Stagger slot · Scroll reveal · Replay on revisit · Entry style · UV Zoom · Hover distort · Cursor smoothing · Click / tap · Grayscale → color · Hover tint · Image fit · Corner radius

## Rank history [How rankings work →](/terms#rankings)

-   All · #8966

## Details

- **Author**: 9dm
- **Price**: $8.00
- **Published**: 2026-06-09
- **Updated**: 2026-06-09
- **Added**: 2026-05-20
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo