About

GODRICH gives people who build websites CSS/SCSS animations and UI components as working demos with complete source files.

Why this site exists

Code found through search is usually a fragment. Paste it in and it does not run, or you cannot tell what to change to get a different result. Every article here exists to fill that gap: a live demo, complete source, and measured numbers, all in one place, so what you copy is a working piece rather than a guess.

This matters most for people who lean on AI coding tools — Cursor, Claude Code, v0, and similar — to generate the first draft of a page. Those tools are good at producing something that looks plausible; they are less good at telling you whether the animation is actually smooth, whether it degrades for users who asked for reduced motion, or where it quietly breaks. That judgment is what each article tries to add on top of the code itself.

How one article gets made

1. Search terms are measured fresh per locale from Google's autocomplete suggestions each time, not translated from one language to another.
2. Each demo is built as HTML + SCSS (plus a React version). No external libraries or CDNs.
3. The demo is rendered in an actual browser and its motion is measured — painted area over time and frame count — and those numbers go into the article.
4. Code blocks in the article are copied directly from the real sections of the demo source, not rewritten for the post.
5. The article for each locale is written from scratch in that language and proofread against that language's own conventions.
6. The demo, source, and prompt are packed into a zip, then checked both ways — it opens with the correct password and fails to open with a wrong one.
7. The article, the demo, and the zip all have to pass a set of automated checks before anything is published. If a check fails, the article does not go live.
8. AI tools are used to draft the article and build the demo. Measurement and verification are done by scripts. The final call on whether something is ready to publish is made by the site's operator.

What is in each article

• A demo that actually moves, with the measured numbers next to it
• An explanation of why a given property is used, not just that it is
• One real situation where the approach breaks
• A variant that changes a single value
• Handling for prefers-reduced-motion
• A zip and its password — placed in a sentence partway through the article, not in a box or in large text. The zip is only useful together with the article's context (what to change and what that changes), so the two are kept together on purpose.

Who writes it

One person runs this site. There is no separate author bio or byline per article.

What is not here

• No comment section.
• Ads are planned through Google AdSense automatic ads; how that works is described in the privacy policy.
• No personal data is collected from visitors beyond what is described in the privacy policy.

License

Code inside the zip files is MIT licensed. Use it on commercial sites. Where an article includes images, the license for each image is listed in the zip's README.

Contact

Questions go to the contact page.