Horizon Dunes
NewFreeA cinematic landscape horizon: rolling hills or wind-carved dunes drifting into layered haze under a luminous sky with a sun or moon, god-rays, high clouds and stars.
- shader
- webgl
- raymarching
- landscape
- dunes
- sky
- background
- hero
Preset
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/horizon-dunes.jsonNeeds a React + Tailwind project set up with shadcn. Copies the effect into your project, along with lib/effect-runtime.ts, the small WebGL layer it runs on. No other dependencies.
Or from npm
pnpm add @kagadmodyaa/effectsimport { HorizonDunes } from '@kagadmodyaa/effects/horizon-dunes'One package with every free effect, one import path each. No Tailwind or shadcn needed, and no stylesheet to import: the few layout rules an effect needs come with it. The npm package and the command above ship the same source.
Usage
Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.
import { HorizonDunes } from '@/components/effects/horizon-dunes/horizon-dunes'
export function Hero() {
return (
<section className="relative h-[640px] overflow-hidden">
{/* fills its parent; the sky above the horizon is calm space for a headline */}
<HorizonDunes preset="Dune" horizon={0.32} className="absolute inset-0" />
<div className="relative z-10 mx-auto max-w-xl px-6 pt-24 text-center text-white">
<h1 className="text-5xl font-semibold tracking-tight">Beyond the next ridge.</h1>
</div>
</section>
)
}
// Presets: Emerald, Dune, Glacier (the light one: use dark text), Nocturne, Ember.
// The stage above is <HorizonDunesShowcase />, also exported, with a headline and a "Keep going" button
// that calls ref.current.surge() to rush the camera forward for a moment.<HorizonDunes preset="Dune" speed={1} />Presets
EmeraldDuneGlacierNocturneEmber
Props
| Name | Type | Default | Description |
|---|---|---|---|
| preset | 'Emerald' | 'Dune' | 'Glacier' | 'Nocturne' | 'Ember' | none (the defaults below) | A named theme. Any prop you pass as well overrides the preset’s value. |
| speed | number | 1 | How fast the camera glides forward. 0 freezes the landscape and the sky. Range 0 to 2.5. |
| parallax | number | 0.6 | How far the camera leans with the pointer. Range 0 to 1. |
| height | number | 0.8 | From a flat plain to tall dunes. Range 0 to 1. |
| sharpness | number | 0.5 | Soft rolling hills to wind-carved crests. Range 0 to 1. |
| detail | number | 0.65 | Sand ripples or turf close to the camera; it fades with distance. Range 0 to 1. |
| turf | number | 0.9 | 0 is sand ripples, 1 is grass. Range 0 to 1. |
| horizon | number | 0.34 | Height of the horizon from the bottom. Lower leaves more sky for a headline. Range 0.2 to 0.6. |
| seed | number | 0 | Rearranges the land and the sky. Range 0 to 20. |
| fogDensity | number | 0.4 | Distance haze and valley mist. Range 0 to 1. |
| fogColor | string | '#92c9ae' | Tint of the mid-distance haze; the far haze melts into the sky. A hex colour. |
| clouds | number | 0.5 | High thin clouds. Range 0 to 1. |
| stars | number | 0 | Only visible where the sky is dark. Range 0 to 1. |
| sunHeight | number | 0.22 | From just below the horizon to high. Range 0 to 1. |
| sunX | number | 0.5 | Left to right. Range -1 to 1. |
| sunSize | number | 0.5 | Size of the disc. Range 0 to 1. |
| sunGlow | number | 0.8 | Bloom around the disc and the haze it lights. Range 0 to 1.5. |
| godRays | number | 0.55 | Soft shafts of light through the haze. Range 0 to 1. |
| sunColor | string | '#ffd08a' | Colour of the sun or moon. A hex colour. |
| disc | 'sun' | 'moon' | 'sun' | A sun, or a cooler cratered moon. |
| skyTop | string | '#1c5470' | Sky colour at the top of the frame. A hex colour. |
| skyHorizon | string | '#ffd9a2' | Sky colour at the horizon. A hex colour. |
| groundNear | string | '#3d9a4c' | Ground colour close to the camera and on lit crests. A hex colour. |
| groundFar | string | '#12493c' | Ground colour in the distance and in the shade. A hex colour. |
| grain | number | 0.3 | Film grain. Range 0 to 1. |
| className | string | — | Extra class on the root element. The effect fills its parent: give the parent a height. |
| style | CSSProperties | — | Inline style on the root element. |
Files
What the command adds to your project, and where.
components/effects/horizon-dunes/horizon-dunes.tsxThe component.
components/effects/horizon-dunes/dunes.tsxThe component.
components/effects/horizon-dunes/showcase.tsxThe component.
components/effects/horizon-dunes/poster.tsxThe component.
components/effects/horizon-dunes/look.tsThe component.
components/effects/horizon-dunes/shaders.tsThe fragment shader, as a string. Edit it to change the picture.
lib/effect-runtime.tsShared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.
Behaviour
- The camera glides slowly forward over a ray-marched height field and drifts a little sideways. Set speed to 0 to freeze the land and the sky; the sky colours also drift slowly between warmer and cooler.
- Move the pointer over the page and the camera leans: a small yaw and pitch plus a sideways shift, so near dunes and far ridges slide against each other. Set pointer parallax to 0 to ignore the pointer.
- Close to the camera the ground has fine detail (sand ripples at three scales, or turf). Every scale fades out as it shrinks toward a pixel, so it never shimmers or sparkles; far ridges are smooth and dissolve into the haze.
- The far haze always takes the colour of the sky, so the farthest ridge melts into the horizon with no seam; fog colour tints the middle distance. Fog density also pools mist in the valleys.
- Glacier is made for light pages: a pale sky with plenty of calm space above the horizon. Nocturne shows stars (they only appear where the sky is dark) and a cratered moon.
- It fills its parent and pauses off screen and in a background tab, lowers its resolution automatically if frames run slow, and draws one composed still frame under prefers-reduced-motion. Without WebGL, and before the first frame, you see a sky, sun and layered-hills poster in the same colours.