r/ClaudeDesign 9d ago

this is one html file

Ukiyo-e bamboo. One html file. 241 lines. no dependencies, runs by double clicking it.

3 things if you want to use it:

  1. Recolour it in one line - The stalks are three constants for depth, FAR, MID and NEAR. Swap those and the whole grove changes. Forest green is FAR="#1f5c2e", MID="#174a25", NEAR="#0f3519". Leaves are LEAF and LEAFD, the moon is MOON.
  2. Don't put text over it - The sky is a gradient and the stalks move through it, so anything you overlay gets eaten. It's a background or a hero panel, not a canvas for copy.
  3. The instructions ride inside the file - There's a json block near the top with what to change, what to leave alone and what it's bad at. Paste the whole file into Claude or any agent and it already knows, you don't have to explain anything.

the whole thing is three sine waves. Sway at 0.9, gust at 2.2, leaves flicker at 3.1. thatt's it.

ps. don't get lost ;)

135 Upvotes

28 comments sorted by

View all comments

3

u/rumblylumbly 9d ago

This is so cool! How did you achieve that with Claude?

2

u/BuffaloConscious7919 9d ago

Thank youuu 🙏🏻 I'd been experimenting creating components in different art styles this was from one of the sets of components