Skip to main content

Search: #前端

黄金海岸
黄金海岸

  1. #优质博文 #CSS #Astro #前端 #组件库
    Bearnie 组件库：基于 Astro 和 Tailwind CSS 且严格遵循 WCAG 2.1 AA 标准的无障碍组件，看着蛮有意思的，Astro 界的 Shadcn 的感觉。

    AI 摘要：Bearnie 挑战了传统的 npm 包组件分发模式，提倡将组件源码直接复制到项目中。它专为 Astro 构建，不依赖 React 或 Vue 等前端框架运行时（Runtime），而是采用原生 JavaScript（Vanilla JS）实现交互。其核心优势在于开发者拥有 100% 的代码控制权、零框架负担、内置无障碍支持（Accessibility）
    Bearnie
    Introduction | Bearnie
    Introduction | Bearnie
    This is not an Astro component library. It's how you build your Astro component library.

  2. #优质博文 #趣站 #前端 #设计
    太优雅了：dany works on

    https://x.com/danywander/status/2038581883982782969
    AI 摘要：开发者 dany 展示了其个人网站新增的多种沉浸式环境模式（Environmental Modes），用户可通过键盘快捷键（Keyboard Shortcuts）在日间、晴天、深夜、月光及雨天模式间无缝切换，甚至包含一个趣味性的“网页崩溃（Crash）”模式。这种结合视觉、动效与声音的交互设计极具氛围感（Atmospheric Design），在社区内引发了关于将其转化为浏览器扩展或编辑器主题的热烈讨论。

    [以下是方便搜索索引的大纲 (AI 生成)，请读原文]
    1. 核心功能与交互设计
    • 桌面端快捷键映射：支持 [D] 日间模式（Day）、[S] 晴天模式（Sunny）、[N] 夜间模式（Night）、[M] 月光模式（Moonlight）及 [R] 雨天模式（Rainy）。
    • 趣味彩蛋：按下 [C] 键可模拟网站崩溃（Crash）效果，再次按下则恢复正常。
    • 移动端交互适配：通过点击 Logo 的不同字母进行切换，其中字母 A 和 N 具备多级点击切换功能。

    2. 社区反馈与技术延伸
    • 跨平台需求：用户对该交互的沉浸感给予高度评价，建议将其开发为 VS Code 皮肤、Claude 皮肤或浏览器扩展（Extension）。
    • 技术组件借鉴：社区成员积极讨论并借鉴了其使用的 Fragment Mono 字体、声音播放器（Sound Player）以及文本动画效果。
    • 创意实现讨论：引发了关于此类复杂视觉效果在 Framer 或其他 Web 开发框架中实现可能性的探讨。


    还有一篇有趣的文章解析

    author dany

  3. #前端 #网页 #设计

    🌐Lusion Labs - 一个收集炫酷前端网页的网站

    📄这个网站的的中文名叫幻觉实验室，不知道的以为是啥机构，用国内的话来说其实就是一家外包公司的企业网站，专门用于展示他们的客户案例

    但是这样的外包公司我赌1包辣条国内没有，因为他们做的网站实在是泰酷辣

    每点进一个卡片都可以看到他们设计的网站，一个比一个炫酷，还是交互式的，非常值得程序员和设计师群体参考

    📮投稿 📢频道 💬群聊