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

    67
  • Wave Mesh

    Wave Mesh

    60
  • Glass Tiles

    Glass Tiles

    55
  • Glyph Swell

    Glyph Swell

    21
  • Orbit Ring Stats

    Orbit Ring Stats

    18
  • Ask Bar

    Ask Bar

    18
  • Glass Carousel

    Glass Carousel

    17
  • Streak Field Stats

    Streak Field Stats

    16

More in Backgrounds

View all
  • Elegant Dark Pattern

    Elegant Dark Pattern

    844
  • Gradient Backgrounds

    Gradient Backgrounds

    26
  • LivingOrigami bg

    LivingOrigami bg

    144
  • Tailwind CSS Background Snippet

    Tailwind CSS Background Snippet

    548
  • Background snippets

    Background snippets

    18
  • Dark Gradient Background

    Dark Gradient Background

    149
  • Gradient Blur Bg

    Gradient Blur Bg

    28
  • Background Components

    Background Components

    45