[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-927":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":35,"discoverSource":36},927,"transitions.dev","Jakubantalik\u002Ftransitions.dev","Jakubantalik","Collection of the most essential transitions for web apps including product motion skill","https:\u002F\u002Ftransitions.dev\u002F",null,"HTML",1230,48,3,2,0,55,224,682,165,100.07,false,"main",true,[26,27,28,29,30,31],"design","motion","product","ui-design","ux","ux-design","2026-06-12 04:00:06","# Transitions.dev\n\nTransitions.dev is an interactive collection of reusable CSS transitions. Each card on the index page demonstrates a different interaction pattern and ships a copy-ready, portable CSS snippet for each.\n\nLive site: https:\u002F\u002Ftransitions.dev\u002F\n\n## Transitions\n\n| # | Name | What it shows |\n|---|------|---------------|\n| 1 | **Card resize** | Smooth card resize transition. |\n| 2 | **Number pop-in** | Digit flip with blur and stagger. |\n| 3 | **Notification badge** | Diagonal slide with spring pop-in. |\n| 4 | **Text states swap** | Text swap transition with blur. |\n| 5 | **Menu dropdown** | Origin-aware open \u002F close transition. |\n| 6 | **Modal open \u002F close** | Modal transition with scale. |\n| 7 | **Panel reveal** | Panel open \u002F close transition. |\n| 8 | **Page side-by-side** | Forward \u002F back page transition. |\n| 9 | **Icon swap** | Scale and blur icon swap. |\n\nEach card has a copy button that emits a self-contained CSS snippet: semantic CSS custom properties on `:root`, the transition rules namespaced under `t-*` classes, and a `@media (prefers-reduced-motion: reduce)` guard — so you can paste the snippet into any project and apply it to any component without pulling in demo-specific markup or sizing.\n\n## Files\n\n- `index.html` — main showcase page with all nine transitions and per-card \"copy CSS\" buttons.\n- `assets\u002F` — icons, favicons, and the social-share OG image.\n- `site.webmanifest`, `robots.txt`, `sitemap.xml` — PWA\u002FSEO metadata.\n\n## Run locally\n\n```bash\npython3 -m http.server 8765\n```\n\nThen open http:\u002F\u002F127.0.0.1:8765\u002F.\n","Transitions.dev 是一个收集了网页应用中最常用过渡效果的项目，提供了可以直接复制粘贴到任何项目的CSS代码片段。其核心功能包括九种不同的交互模式展示，如卡片缩放、数字弹出和菜单下拉等，每种模式都配有可直接使用的CSS代码，并且这些代码片段已经封装好，包含自定义属性、过渡规则类以及针对减少运动偏好的媒体查询，便于开发者快速集成到现有项目中。适用于需要增强用户体验或视觉吸引力的各种Web应用场景，特别是对于追求简洁高效开发流程的设计人员和前端工程师来说非常实用。","2026-06-11 02:40:19","CREATED_QUERY"]