https://github.com/wangjs-jacky/jacky-css
单文件 Web 动效合集，每个动效附带可让 LLM 一次还原的高密度 Prompt 描述词
https://github.com/wangjs-jacky/jacky-css
css-animation frontend gsap svg web-animation
Last synced: 21 days ago
JSON representation
单文件 Web 动效合集，每个动效附带可让 LLM 一次还原的高密度 Prompt 描述词
- Host: GitHub
- URL: https://github.com/wangjs-jacky/jacky-css
- Owner: wangjs-jacky
- Created: 2026-05-17T08:00:13.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-05-17T13:07:28.000Z (about 1 month ago)
- Last Synced: 2026-05-17T15:28:16.329Z (about 1 month ago)
- Topics: css-animation, frontend, gsap, svg, web-animation
- Language: HTML
- Size: 54.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jacky-css
[中文文档](./README_CN.md)
A showcase of single-file web animation effects. Each folder is one self-contained effect: a runnable `index.html` plus a `README.md` whose `## Prompt` section is a high-density description dense enough for an LLM to reproduce the effect in one shot.
## Effects
| Effect | Description |
|---|---|
| [`tile-grid-reveal`](./tile-grid-reveal) | Canvas grid local-zoom that follows the cursor with a GSAP eased ripple |
| [`theme-circle-transition`](./theme-circle-transition) | Theme switch revealed as a circle expanding from the click point |
| [`ease-reverse-menu`](./ease-reverse-menu) | Fullscreen menu reveal/close using asymmetric easing curves |
| [`loop-path-trace`](./loop-path-trace) | A dot tracing a handwritten cursive "loop" path; CSS / SVG / GSAP variants + a Vara.js handwriting demo |
| [`neumorphic-fingerprint-scan`](./neumorphic-fingerprint-scan) | Hover-driven neumorphic fingerprint button: press-in, two-pass etch-then-color self-draw, graceful fade-out |
## Usage
Each effect is dependency-light and self-contained. Open any `index.html` directly in a browser, or read its `README.md` to grab the reproduction Prompt.
## License
MIT