AI 仓库情报摘要

FR-AI / ANALYSIS

为什么值得关注

该项目展示了如何利用 Web Components、Shadow DOM 和 Canvas 2D 等现代 Web 标准，以最少依赖构建一个精致、可动画的 UI 组件。

适合谁使用

构建自定义 UI 组件的 Web 开发者
寻找 Claude 风格界面灵感的开发者
关注零依赖 Web Component 的用户
探索基于努力程度的选择器设计师

典型使用场景

在 Web 应用中集成努力程度选择器
原型设计受 Claude 启发的界面
学习 Web Component 开发模式
创建可访问、带动画的 UI 元素

项目优势

零依赖、自包含的 Web Component
支持键盘、焦点、Esc/外部点击关闭以及 prefers-reduced-motion
通过 CSS 变量自定义外观
触发标准 input/change 事件并提供详细数据

使用前须知

未经 Anthropic 授权或认可
仅限六个固定努力级别
需要现代浏览器支持 Web Components 和 Canvas 2D

README 快速开始

Claude Model Selector

A Claude-inspired effort picker as a zero-dependency Web Component.

Inspired by Claude desktop.

Demo

Open index.html in a browser, or include the component in your own page:

Listen for selection changes through the standard change event:

const selector = document.querySelector("claude-model-selector");

selector.addEventListener("change", (event) => {
  console.log(event.detail.index, event.detail.level);
});

Web Component API

Attribute	Type	Default	Description
`value`	number 0–5	`0`	Low, Medium, High, Extra, Max, or Ultracode
`open`	boolean	`false`	Whether the effort panel is open
`disabled`	boolean	`false`	Disables all interaction

value gets or sets the continuous slider position (snaps to an integer level on release).
level returns the current level name.
open / disabled mirror the attributes.
openPanel(), close(), and toggle() control the panel.
input emits while dragging or adjusting.
change emits when the selection settles on a level.

Both events include { index, level, value } in event.detail.

The component supports modern browsers with Web Components, Shadow DOM, Canvas 2D, and ResizeObserver.

Features

Six discrete effort levels: Low, Medium, High, Extra, Max, and Ultracode
Magnetic drag behavior with spring snapping
Animated Ultracode pixel field on the top tier
Keyboard support, focus styles, Escape / outside-click to close
prefers-reduced-motion support

CSS variables

claude-model-selector {
  --effort-accent: #8c73c9;
  --effort-track: #edeae8;
  --effort-surface: #ffffff;
  --effort-width: min(22.5rem, calc(100vw - 2rem));
}

Development

python3 -m http.server 4173
node --check JavaScript/claude-model-selector.js

Repository layout

JavaScript/                 JavaScript Web Component
index.html                  Browser demo

Disclaimer

This is an independent, Claude-inspired interface experiment. It is not affiliated with or endorsed by Anthropic.

License

MIT

项目描述

Claude-inspired effort picker as a zero-dependency Web Component (MIT)

claude-model-selector