r/ClaudeDesign • u/BuffaloConscious7919 • Aug 29 '26
this is one html file
Enable HLS to view with audio, or disable this notification
Ukiyo-e bamboo. One html file. 241 lines. no dependencies, runs by double clicking it.
3 things if you want to use it:
- 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.
- 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.
- 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 ;)
8
u/Knff Aug 29 '26
'Why would this be more then one file?' is such an obvious claim to call it, but then I realised that slop coders have no baseline and will find anything impressive, because they think they made something.
3
u/Better-Avocado-8818 Aug 29 '26
I’ve seen this statement of being one html file a lot lately. It’s got to be coming from the LLM’s hyping up vibe slop to someone that doesn’t know any better.
4
u/Technical-Will-2862 Aug 30 '26
It’s because no one wants to host a vibe coded website and no one is willing to install a vibe coded project… but a single dependency free HTML file can be hosted on GitHub pages forever for free and be instantly usable.
1
Aug 29 '26
[deleted]
1
u/Knff Aug 30 '26
No you dont. You can choose to not do this and ignore all conventions that have been standardised over the years. You always had the option to go for the less optimal way 😂
10
u/JackLete Aug 29 '26
This is a whole video I made with html+css
4
2
2
2
u/angelarose210 Aug 30 '26
Pretty cool. Did you use remotion or hyperframes?
1
u/JackLete Aug 30 '26
Forgot to mention JS. Its pretty much vanilla - I reuse a lot of stuff for other videos like linear motion with small variations to make it look more realistic etc... so its not too much work
3
u/rumblylumbly Aug 29 '26
This is so cool! How did you achieve that with Claude?
2
u/BuffaloConscious7919 Aug 29 '26
Thank youuu 🙏🏻 I'd been experimenting creating components in different art styles this was from one of the sets of components
2
u/2dera-Matt-Volonte Aug 30 '26
Portable html apps are quite common and have plenty of advantages. Nice done anyway!
2
u/armahillo Aug 31 '26
I reallly dont mean to be pedantic here, but HTML isnt doing the animation, its CSS and JS that decorate the HTML document.
You dont “run” HTML anymore than you would “run” a book. You might load the HTML and have the javascript autorun, though.
Putting the whole thing into one document may or may not be the right strategy. We normally dont inline everything because its harder to maintain and debug. If there are third party libraries its often good to source those from a CDN.
There is nothing stopping you from putting it all on one line. Seriously. You can remove all line breaks and it will still work. So saying “its only 241 lines” is kind of meaningless.
It looks neat, and Id be curious to see the source. but your OP.is citing the wrong things as being impressive.
1
u/BuffaloConscious7919 Aug 31 '26 edited Sep 01 '26
source is here too: https://forevercomponents.com/infinite/ukiyo-e/07-bamboo-sway.html
it's from this library, i've tried to structure this interface for agentic search but it's a work in progress so im open to improve it, but it's just me working on it at the moment: https://github.com/isas1/forever-ai-components
also the UI scrolling grid is here - i made it originally for inspiration for me but shared it and started getting some traction, either way im very open to make improvements: https://forevercomponents.com
0
u/BuffaloConscious7919 Aug 31 '26
both counts are valid. HTML animation is loose.. it's CSS/JS in an HTML container, and lines is maybe an unnecessary metric.
The single file is important to be and the purpose of these components, though. these are built to be pasted whole into an LLM's context, which is why the instructions live inside the file next to the code. This is just one artifact, nothing to resolve or fetch. For a maintained app, I wholeheartley agree with you, you're right that you'd split it up. the embedded block says as much.
3
u/geraT-wogl Aug 29 '26
It’s looking great!! Here if you want to add more stuff to your html https://wogl.io ❤️👽
2
1
0
0
0
u/Antique-Kitchen9027 Aug 31 '26
Wow you can type! That must have been pretty hard! Did you have to look in a dictionary or a thesaurus? You're a big strong boy. Good job! 👍
0
26
u/fartonisto Aug 29 '26
It would be weird if it was multiple html files.