This media is not supported in your browser
VIEW IN TELEGRAM
Steven’s Diary | 为0700.hk卖命中
🚧WIP 光污染地图+拍摄+星空/彗星堆栈 iOS 应用 https://github.com/stvlynn/Stakka
Claude Design 做的 banner 真好看
https://github.com/elder-plinius/CL4R1T4S/blob/main/ANTHROPIC/Claude-Design-Sys-Prompt.txt
Claude-Design-Sys-Prompt.txt
Claude-Design-Sys-Prompt.txt
GitHub
CL4R1T4S/ANTHROPIC/Claude-Design-Sys-Prompt.txt at main · elder-plinius/CL4R1T4S
LEAKED SYSTEM PROMPTS FOR CHATGPT, GEMINI, GROK, CLAUDE, PERPLEXITY, CURSOR, DEVIN, REPLIT, AND MORE! - AI SYSTEMS TRANSPARENCY FOR ALL! 👐 - elder-plinius/CL4R1T4S
Forwarded from cosine - 前端人の日常频道
#优质博文 #css #react #前端 #组件库 #开源
又一个罐头组件库~
Animata:近 200 个动画 React 组件:一套庞大的、专注于动画与交互的开源 React 组件库,基于 Tailwind CSS 构建,支持通过复制粘贴快速集成。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
又一个罐头组件库~
Animata:近 200 个动画 React 组件:一套庞大的、专注于动画与交互的开源 React 组件库,基于 Tailwind CSS 构建,支持通过复制粘贴快速集成。
AI 摘要:Animata 是一套免费且开源(open-source)的 React 动画组件集合,旨在通过简单的“复制粘贴”为 Web 项目添加高质量的交互(interactions)与视觉特效。它并非像 MUI 那样的全功能 UI 框架,而是专注于背景、按钮、文本及功能性小组件(widgets)的动画增强。该库深度集成 Tailwind CSS,允许开发者在保留核心动画逻辑的同时,灵活自定义颜色和字体等样式细节。
[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 项目定位与核心理念
• 非全量 UI 框架:Animata 定位为现有项目的动画增强工具,而非替代传统的 UI 库(如 Chakra-UI)。
• 技术栈支持:核心基于 React 和 Tailwind CSS,重点处理复杂的布局与交互逻辑,将设计细节(如颜色、字体)留给开发者。
• 易用性:主打开源(open-source)与免费,通过代码片段复制即可快速部署。
2. 庞大的组件生态系统
• 背景与布局:提供动画光束(Animated Beam)、交互式网格(Interactive Grid)以及 Bento 网格(Bento grid)等多种视觉背景。
• 交互元素:包含 AI 风格按钮、卡片展开(card spread)、3D 旋转效果及各种鼠标跟随(cursor tracker)交互。
• 文本与内容:内置故障文本(glitch text)、打字机效果(typing text)和滚动揭示(scroll reveal)等 20 余种文字特效。
• 功能小组件(Widgets):包含 30 多种模拟真实应用的功能模块,如电池电量显示、日历插件、音乐播放器堆栈等。
3. 开发指南与贡献规范
• 快速入门:提供详细的安装(setup)教程及本地运行(running locally)环境配置。
• 贡献流程:明确了组件添加规范、文件夹结构以及编写代码的最佳实践(best practices)。
• 变更日志:持续更新组件库,记录新增功能与性能优化。
animata
Hand-crafted animated components that you can copy and paste into your apps. Free & Open Source.