A nature-themed scroll landing page where forest footage plays as you scroll behind fogged-glass panels, soft rounded type and botanical line art that draws itself.
Biophilic makes your landing page feel like walking into a forest. A nature video plays as you scroll, behind fogged-glass panels, soft rounded type and botanical line art that draws itself. Pollen drifts, a firefly follows your cursor, and everything moves slowly, like growth.
The forest footage runs behind the whole page, and the panels are fogged glass so the nature shows through. The UI floats over the scene like mist.
Deep moss-dark grounds, a soft leaf green for labels, and one warm accent used sparingly. Five palettes ship ready, from Deep Forest to Kelp Tide.
Ferns draw themselves, icons sway, pollen drifts and text rises gently. Nothing snaps or bounces.
Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction. Then hand those references to Claude Code. It makes a big difference in the final output.
Vibe coding UI design guide: why AI-built apps look generic, how to pick a design style, and how to give Claude, Cursor or Lovable real design direction.
AI coding tools fall back on the same safe, forgettable aesthetic when they don't have design direction. Here's how to fix it with SKILL.md and DESIGN.md.
Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.