Celadon Template
Celadon is a one-page landing template for SaaS, B2B software and productivity tools, designed around a claymorphism style: soft rounded plates, layered inset highlights and a calm celadon-green accent on a cool pastel canvas. Interactive surfaces use a flat gloss finish with a specular sweep on hover, so active controls feel distinct from static content. The layout is structured to explain a workflow instead of just listing features, which fits products like analytics dashboards, customer feedback tools and internal team platforms that need to build credibility fast.
The build is a single HTML file with inline CSS and vanilla JavaScript. No frameworks, no build step, and no image files at all, since every visual is CSS or inline SVG. Sections include a hero with a pointer-parallax composition, a features slab that splits into six panels on click, a three-step process track, an integration chip cluster, animated statistic counters, a drag-and-throw testimonial rail with inertia physics and arrow controls, a monthly and yearly pricing toggle showing both annual totals and per-month rates, an FAQ accordion, and an email capture section.
An optional Web Audio sound layer gives every interaction a soft synthesised response, with a persistent on and off control and no audio files to load. The template is responsive from 390px upward, supports full keyboard navigation, and respects the reduced-motion preference by disabling animation and physics. Everything is commented and organised around CSS custom properties, so colours, radii and shadow depth can be retuned from one block at the top of the file.
The build is a single HTML file with inline CSS and vanilla JavaScript. No frameworks, no build step, and no image files at all, since every visual is CSS or inline SVG. Sections include a hero with a pointer-parallax composition, a features slab that splits into six panels on click, a three-step process track, an integration chip cluster, animated statistic counters, a drag-and-throw testimonial rail with inertia physics and arrow controls, a monthly and yearly pricing toggle showing both annual totals and per-month rates, an FAQ accordion, and an email capture section.
An optional Web Audio sound layer gives every interaction a soft synthesised response, with a persistent on and off control and no audio files to load. The template is responsive from 390px upward, supports full keyboard navigation, and respects the reduced-motion preference by disabling animation and physics. Everything is commented and organised around CSS custom properties, so colours, radii and shadow depth can be retuned from one block at the top of the file.