@opencode-ai/ui 0.0.0-beta-202606251302

package/src/i18n/zh.ts

@@ -0,0 +1,171 @@
+import { dict as en } from "./en"
+
+type Keys = keyof typeof en
+
+export const dict = {
+  "ui.sessionReview.title": "会话变更",
+  "ui.sessionReview.title.lastTurn": "上一轮变更",
+  "ui.sessionReview.diffStyle.unified": "统一",
+  "ui.sessionReview.diffStyle.split": "拆分",
+  "ui.sessionReview.openFile": "打开文件",
+  "ui.sessionReview.selection.line": "第 {{line}} 行",
+  "ui.sessionReview.selection.lines": "第 {{start}}-{{end}} 行",
+  "ui.sessionReview.expandAll": "全部展开",
+  "ui.sessionReview.collapseAll": "全部收起",
+  "ui.sessionReview.change.added": "已添加",
+  "ui.sessionReview.change.removed": "已移除",
+  "ui.sessionReview.change.modified": "已修改",
+  "ui.sessionReview.image.loading": "加载中...",
+  "ui.sessionReview.image.placeholder": "图片",
+  "ui.sessionReview.largeDiff.title": "差异过大，无法渲染",
+  "ui.sessionReview.largeDiff.meta": "限制：{{limit}} 行变更。当前：{{current}} 行变更。",
+  "ui.sessionReview.largeDiff.renderAnyway": "仍然渲染",
+  "ui.fileMedia.kind.image": "图片",
+  "ui.fileMedia.kind.audio": "音频",
+  "ui.fileMedia.state.removed": "{{kind}}已移除",
+  "ui.fileMedia.state.loading": "正在加载{{kind}}...",
+  "ui.fileMedia.state.error": "加载{{kind}}失败",
+  "ui.fileMedia.state.unavailable": "{{kind}}不可预览",
+  "ui.fileMedia.binary.title": "二进制文件",
+  "ui.fileMedia.binary.description.path": "无法显示 {{path}}，因为它是二进制文件。",
+  "ui.fileMedia.binary.description.default": "无法显示此文件，因为它是二进制文件。",
+
+  "ui.lineComment.label.prefix": "评论 ",
+  "ui.lineComment.label.suffix": "",
+  "ui.lineComment.editorLabel.prefix": "正在评论 ",
+  "ui.lineComment.editorLabel.suffix": "",
+  "ui.lineComment.placeholder": "添加评论",
+  "ui.lineComment.submit": "评论",
+
+  "ui.sessionTurn.steps.show": "显示步骤",
+  "ui.sessionTurn.steps.hide": "隐藏步骤",
+  "ui.sessionTurn.summary.response": "回复",
+  "ui.sessionTurn.diff.showMore": "显示更多更改（{{count}}）",
+
+  "ui.sessionTurn.retry.retrying": "重试中",
+  "ui.sessionTurn.retry.inSeconds": "{{seconds}} 秒后",
+  "ui.sessionTurn.retry.attempt": "第 {{attempt}} 次",
+  "ui.sessionTurn.retry.attemptLine": "{{line}} - 第 {{attempt}} 次",
+  "ui.sessionTurn.retry.geminiHot": "gemini 当前过载",
+  "ui.sessionTurn.error.freeUsageExceeded": "免费使用额度已用完",
+  "ui.sessionTurn.error.addCredits": "添加积分",
+
+  "dialog.usageExceeded.freeTier.title": "免费额度已用完",
+  "dialog.usageExceeded.freeTier.description": "订阅 OpenCode Go，可靠地使用最佳开源模型，每月 $5 起。",
+  "dialog.usageExceeded.freeTier.actionLabel": "订阅",
+  "dialog.usageExceeded.accountRateLimit.title": "Go 额度已用完",
+  "dialog.usageExceeded.accountRateLimit.description":
+    "使用额度已达上限。如需现在继续使用此模型，请从可用余额中启用使用",
+  "dialog.usageExceeded.accountRateLimit.actionLabel": "打开设置",
+
+  "ui.sessionTurn.status.delegating": "正在委派工作",
+  "ui.sessionTurn.status.planning": "正在规划下一步",
+  "ui.sessionTurn.status.gatheringContext": "正在探索",
+  "ui.sessionTurn.status.gatheredContext": "已探索",
+  "ui.sessionTurn.status.searchingCodebase": "正在搜索代码库",
+  "ui.sessionTurn.status.searchingWeb": "正在搜索网页",
+  "ui.sessionTurn.status.makingEdits": "正在修改",
+  "ui.sessionTurn.status.runningCommands": "正在运行命令",
+  "ui.sessionTurn.status.thinking": "思考中",
+  "ui.sessionTurn.status.thinkingWithTopic": "思考：{{topic}}",
+  "ui.sessionTurn.status.gatheringThoughts": "正在整理思路",
+  "ui.sessionTurn.status.consideringNextSteps": "正在考虑下一步",
+
+  "ui.messagePart.questions.dismissed": "问题已忽略",
+  "ui.messagePart.compaction": "会话已压缩",
+  "ui.messagePart.context.read.one": "{{count}} 次读取",
+  "ui.messagePart.context.read.other": "{{count}} 次读取",
+  "ui.messagePart.context.search.one": "{{count}} 次搜索",
+  "ui.messagePart.context.search.other": "{{count}} 次搜索",
+  "ui.messagePart.context.list.one": "{{count}} 个列表",
+  "ui.messagePart.context.list.other": "{{count}} 个列表",
+  "ui.messagePart.diagnostic.error": "错误",
+  "ui.messagePart.title.edit": "编辑",
+  "ui.messagePart.title.write": "写入",
+  "ui.messagePart.option.typeOwnAnswer": "输入自己的答案",
+  "ui.messagePart.review.title": "检查你的答案",
+
+  "ui.list.loading": "加载中",
+  "ui.list.empty": "无结果",
+  "ui.list.clearFilter": "清除筛选",
+  "ui.list.emptyWithFilter.prefix": "没有关于",
+  "ui.list.emptyWithFilter.suffix": "的结果",
+
+  "ui.messageNav.newMessage": "新消息",
+
+  "ui.textField.copyToClipboard": "复制到剪贴板",
+  "ui.textField.copyLink": "复制链接",
+  "ui.textField.copied": "已复制",
+
+  "ui.imagePreview.alt": "图片预览",
+  "ui.scrollView.ariaLabel": "可滚动内容",
+
+  "ui.tool.read": "读取",
+  "ui.tool.loaded": "已加载",
+  "ui.tool.list": "列表",
+  "ui.tool.glob": "Glob",
+  "ui.tool.grep": "Grep",
+  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "网络搜索",
+  "ui.tool.shell": "Shell",
+  "ui.tool.patch": "补丁",
+  "ui.tool.todos": "待办",
+  "ui.tool.todos.read": "读取待办",
+  "ui.tool.questions": "问题",
+  "ui.tool.agent": "{{type}} 智能体",
+  "ui.tool.agent.default": "智能体",
+
+  "ui.common.file.one": "个文件",
+  "ui.common.file.other": "个文件",
+  "ui.common.question.one": "个问题",
+  "ui.common.question.other": "个问题",
+
+  "ui.common.add": "添加",
+  "ui.common.back": "返回",
+  "ui.common.cancel": "取消",
+  "ui.common.confirm": "确认",
+  "ui.common.dismiss": "忽略",
+  "ui.common.close": "关闭",
+  "ui.common.next": "下一步",
+  "ui.common.submit": "提交",
+
+  "ui.permission.deny": "拒绝",
+  "ui.permission.allowAlways": "始终允许",
+  "ui.permission.allowOnce": "允许一次",
+
+  "ui.message.expand": "展开消息",
+  "ui.message.collapse": "收起消息",
+  "ui.message.copy": "复制",
+  "ui.message.copyMessage": "复制消息",
+  "ui.message.forkMessage": "分叉到新会话",
+  "ui.message.revertMessage": "重置到此点",
+  "ui.message.copyResponse": "复制回复",
+  "ui.message.copied": "已复制！",
+  "ui.message.interrupted": "已中断",
+  "ui.message.queued": "排队中",
+  "ui.message.attachment.alt": "附件",
+
+  "ui.patch.action.deleted": "已删除",
+  "ui.patch.action.created": "已创建",
+  "ui.patch.action.moved": "已移动",
+  "ui.patch.action.patched": "已应用补丁",
+
+  "ui.question.subtitle.answered": "{{count}} 已回答",
+  "ui.question.answer.none": "(无答案)",
+  "ui.question.review.notAnswered": "(未回答)",
+  "ui.question.multiHint": "可多选",
+  "ui.question.singleHint": "选择一个答案",
+  "ui.question.custom.placeholder": "输入你的答案...",
+
+  "ui.fileSearch.placeholder": "查找",
+  "ui.fileSearch.previousMatch": "上一个",
+  "ui.fileSearch.nextMatch": "下一个",
+  "ui.fileSearch.close": "关闭搜索",
+  "ui.tool.task": "任务",
+  "ui.tool.skill": "技能",
+  "ui.basicTool.called": "调用了 `{{tool}}`",
+  "ui.toolErrorCard.failed": "失败",
+  "ui.toolErrorCard.copyError": "复制错误",
+  "ui.message.duration.seconds": "{{count}}秒",
+  "ui.message.duration.minutesSeconds": "{{minutes}}分 {{seconds}}秒",
+} satisfies Partial<Record<Keys, string>>

package/src/i18n/zht.ts

@@ -0,0 +1,171 @@
+import { dict as en } from "./en"
+
+type Keys = keyof typeof en
+
+export const dict = {
+  "ui.sessionReview.title": "工作階段變更",
+  "ui.sessionReview.title.lastTurn": "上一輪變更",
+  "ui.sessionReview.diffStyle.unified": "整合",
+  "ui.sessionReview.diffStyle.split": "拆分",
+  "ui.sessionReview.openFile": "開啟檔案",
+  "ui.sessionReview.selection.line": "第 {{line}} 行",
+  "ui.sessionReview.selection.lines": "第 {{start}}-{{end}} 行",
+  "ui.sessionReview.expandAll": "全部展開",
+  "ui.sessionReview.collapseAll": "全部收合",
+  "ui.sessionReview.change.added": "已新增",
+  "ui.sessionReview.change.removed": "已移除",
+  "ui.sessionReview.change.modified": "已修改",
+  "ui.sessionReview.image.loading": "載入中...",
+  "ui.sessionReview.image.placeholder": "圖片",
+  "ui.sessionReview.largeDiff.title": "差異過大，無法渲染",
+  "ui.sessionReview.largeDiff.meta": "限制：{{limit}} 行變更。目前：{{current}} 行變更。",
+  "ui.sessionReview.largeDiff.renderAnyway": "仍然渲染",
+  "ui.fileMedia.kind.image": "圖片",
+  "ui.fileMedia.kind.audio": "音訊",
+  "ui.fileMedia.state.removed": "{{kind}}已移除",
+  "ui.fileMedia.state.loading": "正在載入{{kind}}...",
+  "ui.fileMedia.state.error": "載入{{kind}}失敗",
+  "ui.fileMedia.state.unavailable": "{{kind}}無法預覽",
+  "ui.fileMedia.binary.title": "二進位檔案",
+  "ui.fileMedia.binary.description.path": "無法顯示 {{path}}，因為它是二進位檔案。",
+  "ui.fileMedia.binary.description.default": "無法顯示此檔案，因為它是二進位檔案。",
+
+  "ui.lineComment.label.prefix": "評論 ",
+  "ui.lineComment.label.suffix": "",
+  "ui.lineComment.editorLabel.prefix": "正在評論 ",
+  "ui.lineComment.editorLabel.suffix": "",
+  "ui.lineComment.placeholder": "新增評論",
+  "ui.lineComment.submit": "評論",
+
+  "ui.sessionTurn.steps.show": "顯示步驟",
+  "ui.sessionTurn.steps.hide": "隱藏步驟",
+  "ui.sessionTurn.summary.response": "回覆",
+  "ui.sessionTurn.diff.showMore": "顯示更多變更 ({{count}})",
+
+  "ui.sessionTurn.retry.retrying": "重試中",
+  "ui.sessionTurn.retry.inSeconds": "{{seconds}} 秒後",
+  "ui.sessionTurn.retry.attempt": "第 {{attempt}} 次",
+  "ui.sessionTurn.retry.attemptLine": "{{line}} - 第 {{attempt}} 次",
+  "ui.sessionTurn.retry.geminiHot": "gemini 目前過載",
+  "ui.sessionTurn.error.freeUsageExceeded": "免費使用額度已用完",
+  "ui.sessionTurn.error.addCredits": "新增點數",
+
+  "dialog.usageExceeded.freeTier.title": "已達免費額度上限",
+  "dialog.usageExceeded.freeTier.description": "訂閱 OpenCode Go，可靠地使用最佳開源模型，每月 $5 起。",
+  "dialog.usageExceeded.freeTier.actionLabel": "訂閱",
+  "dialog.usageExceeded.accountRateLimit.title": "已達 Go 額度上限",
+  "dialog.usageExceeded.accountRateLimit.description":
+    "已達使用額度上限。若要現在繼續使用此模型，請從可用餘額中啟用使用",
+  "dialog.usageExceeded.accountRateLimit.actionLabel": "開啟設定",
+
+  "ui.sessionTurn.status.delegating": "正在委派工作",
+  "ui.sessionTurn.status.planning": "正在規劃下一步",
+  "ui.sessionTurn.status.gatheringContext": "正在探索",
+  "ui.sessionTurn.status.gatheredContext": "已探索",
+  "ui.sessionTurn.status.searchingCodebase": "正在搜尋程式碼庫",
+  "ui.sessionTurn.status.searchingWeb": "正在搜尋網頁",
+  "ui.sessionTurn.status.makingEdits": "正在修改",
+  "ui.sessionTurn.status.runningCommands": "正在執行命令",
+  "ui.sessionTurn.status.thinking": "思考中",
+  "ui.sessionTurn.status.thinkingWithTopic": "思考 - {{topic}}",
+  "ui.sessionTurn.status.gatheringThoughts": "正在整理思緒",
+  "ui.sessionTurn.status.consideringNextSteps": "正在考慮下一步",
+
+  "ui.messagePart.questions.dismissed": "問題已略過",
+  "ui.messagePart.compaction": "工作階段已壓縮",
+  "ui.messagePart.context.read.one": "{{count}} 次讀取",
+  "ui.messagePart.context.read.other": "{{count}} 次讀取",
+  "ui.messagePart.context.search.one": "{{count}} 次搜尋",
+  "ui.messagePart.context.search.other": "{{count}} 次搜尋",
+  "ui.messagePart.context.list.one": "{{count}} 個清單",
+  "ui.messagePart.context.list.other": "{{count}} 個清單",
+  "ui.messagePart.diagnostic.error": "錯誤",
+  "ui.messagePart.title.edit": "編輯",
+  "ui.messagePart.title.write": "寫入",
+  "ui.messagePart.option.typeOwnAnswer": "輸入自己的答案",
+  "ui.messagePart.review.title": "檢查你的答案",
+
+  "ui.list.loading": "載入中",
+  "ui.list.empty": "無結果",
+  "ui.list.clearFilter": "清除篩選",
+  "ui.list.emptyWithFilter.prefix": "沒有關於",
+  "ui.list.emptyWithFilter.suffix": "的結果",
+
+  "ui.messageNav.newMessage": "新訊息",
+
+  "ui.textField.copyToClipboard": "複製到剪貼簿",
+  "ui.textField.copyLink": "複製連結",
+  "ui.textField.copied": "已複製",
+
+  "ui.imagePreview.alt": "圖片預覽",
+  "ui.scrollView.ariaLabel": "可捲動內容",
+
+  "ui.tool.read": "讀取",
+  "ui.tool.loaded": "已載入",
+  "ui.tool.list": "清單",
+  "ui.tool.glob": "Glob",
+  "ui.tool.grep": "Grep",
+  "ui.tool.webfetch": "Webfetch",
+  "ui.tool.websearch": "網頁搜尋",
+  "ui.tool.shell": "Shell",
+  "ui.tool.patch": "修補",
+  "ui.tool.todos": "待辦",
+  "ui.tool.todos.read": "讀取待辦",
+  "ui.tool.questions": "問題",
+  "ui.tool.agent": "{{type}} 代理程式",
+  "ui.tool.agent.default": "代理程式",
+
+  "ui.common.file.one": "個檔案",
+  "ui.common.file.other": "個檔案",
+  "ui.common.question.one": "個問題",
+  "ui.common.question.other": "個問題",
+
+  "ui.common.add": "新增",
+  "ui.common.back": "返回",
+  "ui.common.cancel": "取消",
+  "ui.common.confirm": "確認",
+  "ui.common.dismiss": "忽略",
+  "ui.common.close": "關閉",
+  "ui.common.next": "下一步",
+  "ui.common.submit": "提交",
+
+  "ui.permission.deny": "拒絕",
+  "ui.permission.allowAlways": "永遠允許",
+  "ui.permission.allowOnce": "允許一次",
+
+  "ui.message.expand": "展開訊息",
+  "ui.message.collapse": "收合訊息",
+  "ui.message.copy": "複製",
+  "ui.message.copyMessage": "複製訊息",
+  "ui.message.forkMessage": "分支到新工作階段",
+  "ui.message.revertMessage": "重設至此點",
+  "ui.message.copyResponse": "複製回覆",
+  "ui.message.copied": "已複製！",
+  "ui.message.interrupted": "已中斷",
+  "ui.message.queued": "排隊中",
+  "ui.message.attachment.alt": "附件",
+
+  "ui.patch.action.deleted": "已刪除",
+  "ui.patch.action.created": "已建立",
+  "ui.patch.action.moved": "已移動",
+  "ui.patch.action.patched": "已套用修補",
+
+  "ui.question.subtitle.answered": "{{count}} 已回答",
+  "ui.question.answer.none": "(無答案)",
+  "ui.question.review.notAnswered": "(未回答)",
+  "ui.question.multiHint": "可多選",
+  "ui.question.singleHint": "選擇一個答案",
+  "ui.question.custom.placeholder": "輸入你的答案...",
+
+  "ui.fileSearch.placeholder": "搜尋",
+  "ui.fileSearch.previousMatch": "上一個",
+  "ui.fileSearch.nextMatch": "下一個",
+  "ui.fileSearch.close": "關閉搜尋",
+  "ui.tool.task": "任務",
+  "ui.tool.skill": "技能",
+  "ui.basicTool.called": "呼叫了 `{{tool}}`",
+  "ui.toolErrorCard.failed": "失敗",
+  "ui.toolErrorCard.copyError": "複製錯誤",
+  "ui.message.duration.seconds": "{{count}}秒",
+  "ui.message.duration.minutesSeconds": "{{minutes}}分 {{seconds}}秒",
+} satisfies Partial<Record<Keys, string>>

package/src/storybook/fixtures.ts

@@ -0,0 +1,51 @@
+export const diff = {
+  before: {
+    name: "src/greet.ts",
+    contents: `export function greet(name: string) {
+  return \`Hello, \${name}!\`
+}
+`,
+  },
+  after: {
+    name: "src/greet.ts",
+    contents: `export function greet(name: string, excited = false) {
+  const message = \`Hello, \${name}!\`
+  return excited ? \`\${message}!!\` : message
+}
+`,
+  },
+}
+
+export const code = {
+  name: "src/calc.ts",
+  contents: `export function sum(values: number[]) {
+  return values.reduce((total, value) => total + value, 0)
+}
+
+export function average(values: number[]) {
+  if (values.length === 0) return 0
+  return sum(values) / values.length
+}
+`,
+}
+
+export const markdown = [
+  "# Markdown",
+  "",
+  "Use **Markdown** for rich text.",
+  "",
+  "## Highlights",
+  "- Headings, lists, and code blocks",
+  "- Inline `code` and links",
+  "",
+  "```ts",
+  "export const value = 42",
+  "```",
+  "",
+  "More at https://example.com/docs",
+].join("\n")
+
+export const changes = {
+  additions: 18,
+  deletions: 6,
+}

package/src/storybook/scaffold.tsx

@@ -0,0 +1,62 @@
+import { ErrorBoundary, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+function fn(value: unknown): value is (...args: never[]) => unknown {
+  return typeof value === "function"
+}
+
+function pick(mod: Record<string, unknown>, name?: string) {
+  if (name && fn(mod[name])) return mod[name]
+  if (fn(mod.default)) return mod.default
+
+  const preferred = Object.keys(mod)
+    .filter((k) => k[0] && k[0] === k[0].toUpperCase())
+    .find((k) => fn(mod[k]))
+  if (preferred) return mod[preferred]
+
+  const first = Object.keys(mod).find((k) => fn(mod[k]))
+  if (first) return mod[first]
+
+  return () => {
+    return (
+      <div data-component="storybook-missing">
+        <div>Missing component export.</div>
+        <div style="opacity:0.7;font-size:12px">Exports: {Object.keys(mod).join(", ") || "(none)"}</div>
+      </div>
+    )
+  }
+}
+
+export function create(input: {
+  title: string
+  mod: Record<string, unknown>
+  name?: string
+  args?: Record<string, unknown>
+}) {
+  const component = pick(input.mod, input.name) as unknown as ValidComponent
+
+  return {
+    meta: {
+      title: input.title,
+      component,
+    },
+    Basic: {
+      args: input.args ?? {},
+      render: (args: Record<string, unknown>) => {
+        return (
+          <ErrorBoundary
+            fallback={(err) => {
+              return (
+                <pre data-component="storybook-error" style="white-space:pre-wrap">
+                  {String(err)}
+                </pre>
+              )
+            }}
+          >
+            <Dynamic component={component} {...args} />
+          </ErrorBoundary>
+        )
+      },
+    },
+  }
+}

package/src/styles/animations.css

@@ -0,0 +1,141 @@
+:root {
+  --animate-pulse: pulse-opacity 2s ease-in-out infinite;
+  --animate-pulse-scale: pulse-scale 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse-opacity {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-scale {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.6666667);
+  }
+}
+
+@keyframes pulse-opacity-dim {
+  0%,
+  100% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-up-text {
+  animation: fadeUp 0.4s ease-out forwards;
+  opacity: 0;
+
+  &:nth-child(1) {
+    animation-delay: 0.1s;
+  }
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  &:nth-child(4) {
+    animation-delay: 0.4s;
+  }
+  &:nth-child(5) {
+    animation-delay: 0.5s;
+  }
+  &:nth-child(6) {
+    animation-delay: 0.6s;
+  }
+  &:nth-child(7) {
+    animation-delay: 0.7s;
+  }
+  &:nth-child(8) {
+    animation-delay: 0.8s;
+  }
+  &:nth-child(9) {
+    animation-delay: 0.9s;
+  }
+  &:nth-child(10) {
+    animation-delay: 1s;
+  }
+  &:nth-child(11) {
+    animation-delay: 1.1s;
+  }
+  &:nth-child(12) {
+    animation-delay: 1.2s;
+  }
+  &:nth-child(13) {
+    animation-delay: 1.3s;
+  }
+  &:nth-child(14) {
+    animation-delay: 1.4s;
+  }
+  &:nth-child(15) {
+    animation-delay: 1.5s;
+  }
+  &:nth-child(16) {
+    animation-delay: 1.6s;
+  }
+  &:nth-child(17) {
+    animation-delay: 1.7s;
+  }
+  &:nth-child(18) {
+    animation-delay: 1.8s;
+  }
+  &:nth-child(19) {
+    animation-delay: 1.9s;
+  }
+  &:nth-child(20) {
+    animation-delay: 2s;
+  }
+  &:nth-child(21) {
+    animation-delay: 2.1s;
+  }
+  &:nth-child(22) {
+    animation-delay: 2.2s;
+  }
+  &:nth-child(23) {
+    animation-delay: 2.3s;
+  }
+  &:nth-child(24) {
+    animation-delay: 2.4s;
+  }
+  &:nth-child(25) {
+    animation-delay: 2.5s;
+  }
+  &:nth-child(26) {
+    animation-delay: 2.6s;
+  }
+  &:nth-child(27) {
+    animation-delay: 2.7s;
+  }
+  &:nth-child(28) {
+    animation-delay: 2.8s;
+  }
+  &:nth-child(29) {
+    animation-delay: 2.9s;
+  }
+  &:nth-child(30) {
+    animation-delay: 3s;
+  }
+}