Dune Field React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import DuneField from "./DuneField";

export default function Example() {
  return (
    <DuneField
      color={"#b0805d"}
      highlightColor={"#ebcba0"}
      background={"#231b18"}
      speed={18}
      minHeight={400}
      children={"A slower kind of motion."}
      style={{
        "color": "#f4e5d0",
        "fontSize": 35,
        "alignItems": "start",
        "paddingTop": 55,
        "letterSpacing": "-.05em"
      }}
    />
  );
}

Using Dune Field

Place a heading or other foreground content in children. Set minHeight to reserve the background area.

Use colour and highlight differences to define the dune ridges without making the entire section bright. speed changes the pace of the drifting layers.

Props

Name	Type	Required	Default	Description
color	string	No	"#bb8d66"	Main dune colour.
highlightColor	string	No	"#efd3a8"	Ridge highlight and gradient colour.
background	string	No	"#211a18"	Sky and shadow colour.
speed	number	No	18	One-way drift duration in seconds.
minHeight	number \| string	No	380	Minimum container height in pixels or a CSS length.
children	ReactNode	No	undefined	Optional caller content above the landscape.
className	string	No	""	Additional classes merged with component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing, typography, and appearance.