---
title: "Shifting Sands — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Abhrajit Ray · Effects. WebGL based interactive sand dunes"
canonical: "https://framer.elliotli.dev/component/shifting-sands"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Shifting Sands

# Shifting Sands

WebGL based interactive sand dunes

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

![Shifting Sands preview image 1](https://framer.elliotli.dev/og/component/shifting-sands/fdae9b55c7483b0b/1600x1200.jpg)

## Summary

WebGL based interactive sand dunes

## Description

## Why it works:

The point of this one isn't to grab attention. It's the opposite. Most shader backgrounds compete with whatever you put on top of them, which is fine for a launch page but exhausting on the kind of site people are meant to read.

### Under the hood:

It's still a real shader doing real work. The ridges come from layered noise stretched in one direction, so they read as wind-sculpted dunes instead of generic blobs. A second, finer noise layer sits on top as wind ripple. The hover effect nudges the wind vector, so the dunes shift slightly toward where you move rather than just deforming around the cursor.

### Best for:

\- Lifestyle, wellness, and hospitality brands

\- Photography, architecture, and design portfolios

\- Sustainability, craft, and outdoor brands

\- Editorial and storytelling sites

### Controls:

\- **Accent**: base sand color

\- **Secondary**: highlight color along the dune crests

\- **Speed**: animation pace (0–2)

\- **Folds**: dune ridge density (0.4–4)

\- **Grain**: fine wind-ripple density (0–0.5)

\- **Hover effect**: cursor-driven wind displacement

\- **Quality**: render DPR (0.5–2)

### Built for production:

WebGL2, ~99% browser coverage. Auto-pauses offscreen and in Framer's canvas. Respects \`prefers-reduced-motion\`. Resizes any aspect ratio. DPR according to device.

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

-   All · #9647

## Details

- **Author**: Abhrajit Ray
- **Price**: $10.00
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-05-11
- **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