900 interactive HTML, CSS and JavaScript demos by SHIYU YANG, built with Codex.
Buttons and controls, web layouts, and app interaction patterns. Each example contains runnable code and notes about its intended use, states and limitations. Names and descriptions are available in Chinese and English.
Clone or download this repository, then open index.html in a browser. No package installation or build step is required for the catalog.
git clone https://github.com/ShiYuPro/ui-effects.git
cd ui-effects
python3 -m http.server 8080Visit http://localhost:8080. Search by name or description, filter by category, and open an example. The Download HTML link saves its runnable source. Shared theme styles and scripts are embedded in each exported example.
- Unknown-safe condition gate: separate true, false and unknown conditions.
- Hold to confirm: deliberate confirmation feedback.
- Archive and undo: a reversible action.
index.html Searchable catalog
catalog.js Names, descriptions and example paths
catalog-ui.js Catalog search, filtering and pagination
style.css Catalog styles
examples/<group>/<id>/
index.html Runnable example
README.md Use cases, states and implementation notes
Copy an example, adapt its layout and connect it to your own application state. These are interaction demonstrations, not production backend implementations. Authentication, payments, audit logs and other business actions shown in a demo still need real services and validation.
The current visual pass adjusts heading spacing and lowers decorative color saturation. It includes a desktop layout sample from each of the 90 groups and desktop/mobile interaction checks for the condition gate; it is not an exhaustive accessibility or cross-browser certification of all 900 examples.
For a bug report, include the example path, browser, viewport and steps to reproduce. Focused fixes and improvements to keyboard, touch and reduced-motion behavior are welcome. Please keep example changes scoped and explain how you checked them.
MIT. Copyright © 2026 SHIYU YANG. Keep the license notice when redistributing the code.

0 comments
log in to comment.