ham7a311

Dune Field

Backgrounds

About

An animated canvas background of layered desert dune ridges lit at low sun angle, with slow drifting parallax that follows pointer movement.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dune Field to your project and fits it to your theme.

Code

How Dune Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { DuneField } from "@/components/ui/dune-field";

export default function Demo() {
  return (
    <div className="w-full h-screen">
      <DuneField />
    </div>
  );
}

More by ham7a311

View all
  • Route Globe

    Route Globe

    70
  • Wave Mesh

    Wave Mesh

    65
  • Glass Tiles

    Glass Tiles

    56
  • Glyph Swell

    Glyph Swell

    23
  • Orbit Ring Stats

    Orbit Ring Stats

    20
  • Ask Bar

    Ask Bar

    18
  • Streak Field Stats

    Streak Field Stats

    17
  • Glass Carousel

    Glass Carousel

    17

More in Backgrounds

View all
  • Elegant Dark Pattern

    Elegant Dark Pattern

    846
  • Light theme Tailwind CSS Background Snippet

    Light theme Tailwind CSS Background Snippet

    229
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    552
  • Gradient Backgrounds

    Gradient Backgrounds

    23
  • Background snippets

    Background snippets

    110
  • Background Components

    Background Components

    45
  • Jade Sky

    Jade Sky

    93
  • Gradient Blur Bg

    Gradient Blur Bg

    51