Meng To

Landscape

Shaders 2

About

A sandboxed Three.js procedural terrain scene with seven time-of-day and weather presets (sunrise, noon, sunset, night, rain, storm, snow) embedded via an iframe.

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

Code

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

Usage.tsx

import LandscapeScene from "@/components/ui/landscape";

export default function LandscapeRainDemo() {
  return (
    <div className="shader-frame h-[480px] w-full overflow-hidden rounded-lg border border-border bg-background">
      <LandscapeScene variant="rain" className="h-full w-full" />
    </div>
  );
}

More by Meng To

View all
  • Gateway Flow

    Gateway Flow

    1.9K
  • Glassmorphism CTA

    Glassmorphism CTA

    838
  • Globe Type Study

    Globe Type Study

    771
  • Particle Drift

    Particle Drift

    730
  • Generative Tree

    Generative Tree

    635
  • Topo Field

    Topo Field

    598
  • Dot Border Button

    Dot Border Button

    517
  • Spark Badge

    Spark Badge

    491

More in Shaders

View all
  • Glass Fold

    Glass Fold

    402
  • Shader Animation

    Shader Animation

    3.8K
  • Illos Knowledge Sources

    Illos Knowledge Sources

    31
  • Illos Webhook Setup

    Illos Webhook Setup

    18
  • Black Hole

    Black Hole

    38
  • Wave

    Wave

    710
  • Shader Background

    Shader Background

    2K
  • Ocean Swirl

    Ocean Swirl

    20

Explore more

Part of ThreeUI — browse the full library on 21st.dev.