[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82744":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":8,"language":10,"languages":8,"totalLinesOfCode":8,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":17,"compositeScore":18,"rankGlobal":8,"rankLanguage":8,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":8,"pushedAt":8,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":14,"starSnapshotCount":14,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},82744,"halftone-dots","haaarshsingh\u002Fhalftone-dots","haaarshsingh",null,"","TypeScript",230,19,1,0,34,68,6,64.7,"MIT License",false,"main",true,[],"2026-06-12 04:01:38","https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fb581a248-5c61-4520-a0ad-c2fe5f962e5a\n\n# Halftone Dots\n\nRecreate any image as an animated **halftone dot field** on a single HTML5 `\u003Ccanvas>` — and morph between images with a dramatic radial wave (the old dots implode from the center, the new ones explode back in with overshoot).\n\nIt's one component, no animation libraries: just `requestAnimationFrame` + a little canvas math.\n\n## How it works\n\n1. The source image is drawn into a small offscreen buffer and **supersampled** — each output cell measures its *ink coverage* (fraction of non-white pixels) and the average ink color.\n2. Each cell becomes a dot whose **radius tracks coverage** and whose color comes from the source (or an optional gradient override). White\u002Fbackground is keyed out.\n3. Dots are painted on one supersampled `\u003Ccanvas>` (crisp on HiDPI). On `src` change, a radial-wave morph animates them out and back in.\n4. Honors `prefers-reduced-motion` (renders instantly, no morph).\n\n## Usage\n\n```tsx\nimport { DotHalftone } from '.\u002FDotHalftone'\n\nexport default function Example() {\n  return (\n    \u003CDotHalftone\n      src=\"\u002Fsamples\u002Fcity.png\"\n      \u002F\u002F optional top→bottom gradient that recolors the dots\n      gradient={['#ff6ea6', '#7b2ff7']}\n      accent=\"#5b21ff\"\n      style={{ width: 420, height: 420 }}\n    \u002F>\n  )\n}\n```\n\n### Props\n\n| Prop        | Type                       | Default     | Description                                         |\n| ----------- | -------------------------- | ----------- | --------------------------------------------------- |\n| `src`       | `string`                   | —           | Image to recreate as dots. Changing it morphs.      |\n| `gradient`  | `[string, string]`         | —           | Optional top→bottom hex gradient recoloring dots.   |\n| `accent`    | `string`                   | `'#5b21ff'` | Corner-cluster accent color.                        |\n| `className` | `string`                   | —           | Class for the (relative) container.                 |\n| `style`     | `React.CSSProperties`      | —           | Inline styles; set the size here or via `className`.|\n\n> Tip: images with a **white\u002Ftransparent background** and clear subject work best (the background is keyed out). Square sources fill the frame most naturally.\n\n## Develop\n\n```bash\npnpm install\npnpm dev\n```\n","该项目通过HTML5 `\u003Ccanvas>`将任意图像重构成动态的半色调点阵，并支持在不同图像间以径向波的形式进行平滑过渡。其核心功能包括图像超采样计算、根据像素覆盖率调整点的大小和颜色，以及对高分辨率屏幕的支持。项目使用TypeScript编写，仅依赖于`requestAnimationFrame`实现动画效果，无需额外动画库。适用于需要独特视觉效果的网页设计场景，如创意广告、个性化网站背景或艺术展示等。此外，它还考虑到了偏好减少运动的用户需求，在这种情况下会立即渲染而不执行过渡动画。",2,"2026-06-11 04:09:05","CREATED_QUERY"]