$ show zxuqian/html-css-examples
This repository is a collection of front-end code examples (HTML, CSS, JavaScript) created for video tutorials on Bilibili. It contains over 50 standalone projects demonstrating various web techniques such as CSS animations, SVG effects, glassmorphism, parallax scrolling, face recognition, Lottie animations, and interactive physics. The main entry point is a React-based navigation page, but each example is self-contained in its own folder. The code is primarily educational and not intended for production use. Dependencies are outdated (React 17, Babel 7.12) and there is no testing or CI/CD. While some components exhibit creative use of web APIs, the overall codebase is boilerplate-heavy and tightly coupled to its tutorial context, limiting reusability.
The LLM identified 2 files worth highlighting for reuse:
Implements a 2D collision physics engine from scratch using JavaScript and HTML Canvas. Features include velocity, bounding box collision detection, restitution (bounce), and frame-by-frame animation. The code is self-contained (no external dependencies) and can be extracted as a reusable physics module for browser-based games or simulations.
Interactive hiragana/katakana pronunciation chart using CSS 3D flip cards and SVG filter effects. Each character card flips on hover to reveal the romanized reading. The layout is fully responsive and uses only vanilla CSS (no JavaScript for the flip). This pattern can be adapted for any flashcard-style learning tool or trivia interface.