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
  • Wave Mesh

    Wave Mesh

    82
  • Route Globe

    Route Globe

    78
  • Glass Tiles

    Glass Tiles

    68
  • Glyph Swell

    Glyph Swell

    28
  • Orbit Ring Stats

    Orbit Ring Stats

    26
  • Ask Bar

    Ask Bar

    23
  • Wind Map

    Wind Map

    18
  • Glass Carousel

    Glass Carousel

    18

More in Backgrounds

View all
  • Elegant Dark Pattern

    Elegant Dark Pattern

    850
  • Light theme Tailwind CSS Background Snippet

    Light theme Tailwind CSS Background Snippet

    232
  • Background snippets

    Background snippets

    229
  • Gradient Backgrounds

    Gradient Backgrounds

    28
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    558
  • LivingOrigami bg

    LivingOrigami bg

    146
  • Background Components

    Background Components

    20
  • Gradient Blur Bg

    Gradient Blur Bg

    72