{ "schemaVersion": 1, "name": "TuneShape", "alternateName": "随形", "count": 61, "website": "https://tuneshape.kai-nex.com/", "repository": "https://github.com/orocoa/TuneShape", "effects": [ { "id": "basic-button", "name": "Button Press Feedback", "nameZh": "按钮按压反馈", "category": "控件", "description": "Button Press Feedback · Duration spring · 420 ms / bounce 0.25", "descriptionZh": "按钮按压反馈，使用时长型弹簧；420 ms / 回弹 0.25。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/button-press/", "en": "https://tuneshape.kai-nex.com/en/effects/button-press/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/basic-button", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/basic-button", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/basic-button/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/basic-button/README.md" }, "defaultConfig": { "schemaVersion": 1, "component": "button", "mode": "beginner", "animation": "spring", "durationMs": 420, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "bounce": 0.25, "x": 0, "y": 2, "scale": 0.92, "stiffness": 260, "damping": 24, "mass": 1, "interruption": "retarget", "reducedMotion": "instant" } }, { "id": "hover-invert", "name": "Hover Color Transition", "nameZh": "悬停配色过渡", "category": "控件", "description": "Hover Color Transition · 220 ms · Reprise", "descriptionZh": "悬停配色过渡 · 220 ms · Reprise", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/hover-invert/", "en": "https://tuneshape.kai-nex.com/en/effects/hover-invert/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/hover-invert", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/hover-invert", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/hover-invert/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/hover-invert/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "hover-invert", "durationMs": 220, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [ { "part": "face", "property": "backgroundColor", "values": [ "#ffffff", "#171717" ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "face", "property": "color", "values": [ "#171717", "#ffffff" ], "times": [ 0, 1 ], "start": 0, "span": 1 } ] } }, { "id": "duration-picker", "name": "Duration Picker", "nameZh": "时长选择器", "category": "控件", "description": "A compact duration input that springs apart to edit and joins on confirmation.", "descriptionZh": "紧凑的时长输入，点击后弹开编辑，确认后重新合拢。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/duration-picker/", "en": "https://tuneshape.kai-nex.com/en/effects/duration-picker/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/duration-picker", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/duration-picker", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/duration-picker/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/duration-picker/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "duration-picker", "durationMs": 450, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "durationPicker": { "hours": 7, "minutes": 25, "maxHours": 24, "maxMinutes": 60, "hoursLabel": "h", "minutesLabel": "min", "gap": 8, "bounce": 0.12, "height": 48, "radius": 12, "theme": "light", "defaultEditing": false, "disabled": false } } }, { "id": "glass-radio", "name": "Glass Segmented Radio Control", "nameZh": "玻璃分段单选", "category": "控件", "description": "Glass Segmented Radio Control · 500 ms · Uiverse.io · chase2k25", "descriptionZh": "玻璃分段单选 · 500 ms · Uiverse.io · chase2k25", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/glass-radio/", "en": "https://tuneshape.kai-nex.com/en/effects/glass-radio/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/glass-radio", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/glass-radio", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glass-radio/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glass-radio/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "glass-radio", "durationMs": 500, "delayMs": 0, "easing": [ 0.37, 1.95, 0.66, 0.56 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [ { "part": "glider", "property": "x", "values": [ "0%", "100%" ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "finish0", "property": "opacity", "values": [ 1, 0 ], "times": [ 0, 1 ], "start": 0, "span": 0.8 }, { "part": "finish1", "property": "opacity", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0, "span": 0.8 }, { "part": "finish2", "property": "opacity", "values": [ 0, 0 ], "times": [ 0, 1 ], "start": 0, "span": 0.8 }, { "part": "label0", "property": "color", "values": [ "#303640", "#68717d" ], "times": [ 0, 1 ], "start": 0, "span": 0.6 }, { "part": "label1", "property": "color", "values": [ "#68717d", "#303640" ], "times": [ 0, 1 ], "start": 0, "span": 0.6 }, { "part": "label2", "property": "color", "values": [ "#68717d", "#68717d" ], "times": [ 0, 1 ], "start": 0, "span": 0.6 } ], "glass": { "theme": "light", "motion": "spring", "bounce": 0.24 } } }, { "id": "dropdown", "name": "Dropdown Menu", "nameZh": "下拉菜单", "category": "控件", "description": "Dropdown Menu · 400 ms · Ariadne", "descriptionZh": "下拉菜单 · 400 ms · Ariadne", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/dropdown-menu/", "en": "https://tuneshape.kai-nex.com/en/effects/dropdown-menu/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/dropdown", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/dropdown", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/dropdown/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/dropdown/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "dropdown", "durationMs": 400, "delayMs": 0, "easing": [ 0.25, 0.1, 0.25, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [ { "part": "panel", "property": "y", "values": [ -7, 0 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "panel", "property": "scale", "values": [ 0.985, 1 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "panel", "property": "opacity", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "item0", "property": "y", "values": [ -4, 0 ], "times": [ 0, 1 ], "start": 0, "span": 0.78 }, { "part": "item0", "property": "opacity", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0, "span": 0.78 }, { "part": "item1", "property": "y", "values": [ -4, 0 ], "times": [ 0, 1 ], "start": 0.086, "span": 0.78 }, { "part": "item1", "property": "opacity", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0.086, "span": 0.78 } ] } }, { "id": "folder", "name": "Folder", "nameZh": "文件夹", "category": "容器", "description": "Folder · 640 ms · Ariadne", "descriptionZh": "文件夹 · 640 ms · Ariadne", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/folder/", "en": "https://tuneshape.kai-nex.com/en/effects/folder/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/folder", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/folder", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/folder/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/folder/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "folder", "durationMs": 640, "delayMs": 0, "easing": [ 0.16, 1, 0.3, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [ { "part": "paper", "property": "y", "values": [ 7, -7 ], "times": [ 0, 1 ], "start": 0, "span": 0.75 }, { "part": "paper", "property": "rotateX", "values": [ 0, -7 ], "times": [ 0, 1 ], "start": 0, "span": 0.75 }, { "part": "front", "property": "rotateX", "values": [ 0, -30 ], "times": [ 0, 1 ], "start": 0, "span": 0.71875 }, { "part": "front", "property": "y", "values": [ 0, 8 ], "times": [ 0, 1 ], "start": 0, "span": 0.71875 } ] } }, { "id": "glass-folder", "name": "Glass Folder", "nameZh": "磨砂文件夹", "category": "容器", "description": "A frosted flap tilts forward as document cards fan out and lift.", "descriptionZh": "磨砂翻盖向前倾斜，文件卡片错峰扇开并抬起。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/glass-folder/", "en": "https://tuneshape.kai-nex.com/en/effects/glass-folder/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/glass-folder", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/glass-folder", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glass-folder/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glass-folder/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "glass-folder", "durationMs": 800, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "glassFolder": { "name": "", "documents": [ { "title": "Notes", "body": "" }, { "title": "Draft", "body": "" }, { "title": "Ideas", "body": "" } ], "color": "white", "size": "md", "lift": 175, "spread": 68, "hoverLift": 20, "tilt": 55, "fanAngle": 16, "initialOpen": false } } }, { "id": "scroll-progress", "name": "Scroll Progress", "nameZh": "阅读进度胶囊", "category": "导航", "description": "Hover the current chapter pill to open navigation, then click a chapter to jump.", "descriptionZh": "圆环跟随真实阅读进度，悬停胶囊自动展开，点击章节定位。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/scroll-progress/", "en": "https://tuneshape.kai-nex.com/en/effects/scroll-progress/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/scroll-progress", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/scroll-progress", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/scroll-progress/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/scroll-progress/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "scroll-progress", "durationMs": 500, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "scrollProgress": { "title": "Attention Is All You Need", "sections": [ { "id": "introduction", "label": "Introduction", "body": "The 2017 paper introduced the Transformer, a model first tested on machine translation. It replaces recurrent and convolutional layers with attention, allowing more of the training computation to run in parallel." }, { "id": "self-attention", "label": "Self-Attention", "body": "Each token creates a query, a key and a value. The query is compared with keys to assign attention weights. A weighted combination of values gives that token information from relevant parts of the sequence." }, { "id": "multi-head-attention", "label": "Multi-Head Attention", "body": "Several attention heads work in parallel, learning different relationships between tokens. Their outputs are combined into one representation. Positional encodings add information about token order, which attention alone does not provide." }, { "id": "transformer", "label": "The Transformer", "body": "An encoder builds representations of the input. A decoder uses those representations and earlier output tokens to predict the next token. A mask hides future output tokens during training. Both stacks also contain feed-forward layers. The paper demonstrated strong translation results with less sequential computation." } ], "initialProgress": 0, "initialOpen": false, "offset": 120, "bottom": 24, "fontSize": 14, "accentColor": "#222222", "theme": "light" } } }, { "id": "hook-sidebar", "name": "Hook Sidebar", "nameZh": "钩线侧栏", "category": "导航", "description": "A fine hooked rail marks selection while a neutral rail follows hover or focus.", "descriptionZh": "细钩线标记当前项，灰色轨道跟随悬停与焦点。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/hook-sidebar/", "en": "https://tuneshape.kai-nex.com/en/effects/hook-sidebar/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/hook-sidebar", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/hook-sidebar", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/hook-sidebar/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/hook-sidebar/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "hook-sidebar", "durationMs": 360, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "hookSidebar": { "label": "TuneShape", "items": [ "Controls", "Navigation", "Containers", "Text", "Images", "Indicators", "Backgrounds" ], "initialIndex": 0, "rowHeight": 32, "fontSize": 14, "accentColor": "#fc4c01", "dashed": true, "theme": "light" } } }, { "id": "rail-toc", "name": "Rail TOC", "nameZh": "纸飞机目录", "category": "导航", "description": "A reading rail with a paper plane that follows the current section.", "descriptionZh": "纸飞机沿层级轨道跟随阅读进度，经过的路径与节点逐步填实。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/rail-toc/", "en": "https://tuneshape.kai-nex.com/en/effects/rail-toc/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/rail-toc", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/rail-toc", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/rail-toc/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/rail-toc/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "rail-toc", "durationMs": 520, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "railToc": { "title": "On this page", "items": [ { "id": "installation", "label": "Installation", "depth": 0, "body": "Start with a clear path. The contents list keeps every section within reach." }, { "id": "prerequisites", "label": "Prerequisites", "depth": 1, "body": "Gather the essentials before you begin. Related sections sit one step inside their parent." }, { "id": "installation-steps", "label": "Installation Steps", "depth": 1, "body": "Take one step at a time. Select a heading to jump directly to its place in the article." }, { "id": "configuration", "label": "Configuration", "depth": 1, "body": "Choose the spacing and reading position that suit your page." }, { "id": "usage", "label": "Usage", "depth": 0, "body": "Read at your own pace. The paper plane follows your progress along the rail." }, { "id": "customizing-content", "label": "Customizing Content", "depth": 1, "body": "Give each section a useful name. Short, concrete labels make a long page easier to explore." }, { "id": "submenu-content", "label": "Submenu Content", "depth": 2, "body": "Use a deeper level for details that belong together. The rail bends to reflect the hierarchy." }, { "id": "features", "label": "Features", "depth": 0, "body": "Return to any section whenever you need it. Scrolling upward turns the plane around." } ], "initialIndex": 0, "indent": 14, "rowHeight": 32, "fontSize": 14, "offset": 96, "planeSize": 16, "accentColor": "#333333", "theme": "light", "showContent": false } } }, { "id": "card-morph", "name": "Card Expansion", "nameZh": "卡片展开", "category": "容器", "description": "Card Expansion · 540 ms · Ariadne", "descriptionZh": "卡片展开 · 540 ms · Ariadne", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/card-expand/", "en": "https://tuneshape.kai-nex.com/en/effects/card-expand/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/card-morph", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/card-morph", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/card-morph/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/card-morph/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "card-morph", "durationMs": 540, "delayMs": 0, "easing": [ 0.16, 1, 0.3, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [ { "part": "surface", "property": "width", "values": [ "45%", "90%" ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "surface", "property": "height", "values": [ 75, 190 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "surface", "property": "borderRadius", "values": [ 15, 10 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "summary", "property": "opacity", "values": [ 1, 0 ], "times": [ 0, 1 ], "start": 0, "span": 0.25 }, { "part": "detail", "property": "opacity", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0.7, "span": 0.3 } ] } }, { "id": "gooey-wordmark", "name": "Gooey Wordmark", "nameZh": "液态交互字标", "category": "文字", "description": "A blurred liquid mass resolves into readable type. The pointer melts nearby strokes and changes each touched letter’s hue.", "descriptionZh": "模糊液团逐渐凝聚成字标；鼠标在局部融化、黏连笔画，并逐字切换颜色。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/gooey-wordmark/", "en": "https://tuneshape.kai-nex.com/en/effects/gooey-wordmark/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/gooey-wordmark", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/gooey-wordmark", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/gooey-wordmark/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/gooey-wordmark/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "gooey-wordmark", "durationMs": 1600, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "gooey-wordmark", "text": "tuneshape", "fontSize": 210, "fontWeight": 600, "color": "#9864c7", "intensity": 1, "radius": 100, "grid": true, "annotations": true, "backgroundColor": "#f1f1f1", "caption": "Shape the way things move." } } }, { "id": "typewriter-text", "name": "Typewriter Text", "nameZh": "逐字打出", "category": "文字", "description": "Reveal text at a fixed typing rate with a blinking block cursor.", "descriptionZh": "文字按固定速度逐字打出，末尾光标按时间闪烁。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/typewriter-text/", "en": "https://tuneshape.kai-nex.com/en/effects/typewriter-text/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/typewriter-text", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/typewriter-text", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/typewriter-text/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/typewriter-text/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "typewriter-text", "durationMs": 4000, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "typewriter-text", "text": "Hello, World!", "fontSize": 72, "fontWeight": 600, "color": "#171717", "charsPerSecond": 22, "cursor": true, "cursorColor": "#171717" } } }, { "id": "soft-blur-in", "name": "Soft Blur In", "nameZh": "柔焦入场", "category": "文字", "description": "Characters fade in, drift upward and sharpen individually.", "descriptionZh": "文字逐字从轻微上移与柔焦中变得清晰。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/soft-blur-in/", "en": "https://tuneshape.kai-nex.com/en/effects/soft-blur-in/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/soft-blur-in", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/soft-blur-in", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/soft-blur-in/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/soft-blur-in/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "soft-blur-in", "durationMs": 2000, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "soft-blur-in", "text": "Think different.", "fontSize": 72, "fontWeight": 600, "color": "#171717", "blur": 12 } } }, { "id": "short-slide-down", "name": "Short Slide Down", "nameZh": "落词堆叠", "category": "文字", "description": "Words enter from above and form a growing stack that stays centered.", "descriptionZh": "词语从上方依次落下，整组位置随词数调整并始终居中。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/short-slide-down/", "en": "https://tuneshape.kai-nex.com/en/effects/short-slide-down/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/short-slide-down", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/short-slide-down", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/short-slide-down/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/short-slide-down/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "short-slide-down", "durationMs": 2000, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "short-slide-down", "text": "Build from above.", "fontSize": 72, "fontWeight": 600, "color": "#171717", "entryOffset": 28 } } }, { "id": "kinetic-center-build", "name": "Kinetic Center Build", "nameZh": "居中推词", "category": "文字", "description": "Words enter from the right and push existing words into a centered phrase.", "descriptionZh": "词语从右侧进入，推挤已有文字，逐步组成居中的完整短句。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/kinetic-center-build/", "en": "https://tuneshape.kai-nex.com/en/effects/kinetic-center-build/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/kinetic-center-build", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/kinetic-center-build", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/kinetic-center-build/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/kinetic-center-build/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "kinetic-center-build", "durationMs": 2000, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "kinetic-center-build", "text": "Words push left.", "fontSize": 72, "fontWeight": 600, "color": "#171717", "entryOffset": 88 } } }, { "id": "period-drop", "name": "Period Drop", "nameZh": "句点弹落", "category": "文字", "description": "Letters rise into view before an inline period falls, stretches and bounces twice.", "descriptionZh": "字母上升入场，句点从上方落下并以拉伸、压扁和两次回弹收尾。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/period-drop/", "en": "https://tuneshape.kai-nex.com/en/effects/period-drop/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/period-drop", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/period-drop", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/period-drop/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/period-drop/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "period-drop", "durationMs": 1567, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "period-drop", "text": "Tuneshape", "fontSize": 160, "fontWeight": 800, "color": "#171717", "dotColor": "#737373", "dotSize": 0.2 } } }, { "id": "outline-trace", "name": "Outline Trace", "nameZh": "字形描边", "category": "文字", "description": "Trace actual glyph contours, then reveal their fill from bottom to top.", "descriptionZh": "沿真实字形轮廓逐字描绘，再由下往上填充字面。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/outline-trace/", "en": "https://tuneshape.kai-nex.com/en/effects/outline-trace/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/outline-trace", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/outline-trace", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/outline-trace/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/outline-trace/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "outline-trace", "durationMs": 1467, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "outline-trace", "text": "Outline", "fontSize": 150, "fontWeight": 800, "color": "#171717", "strokeColor": "#171717", "strokeWidth": 2.5, "stagger": 3, "fill": true, "keepStroke": false } } }, { "id": "glyph-anatomy", "name": "Glyph Anatomy", "nameZh": "字形构建", "category": "文字", "description": "Metric guides, contour anchors and Bezier handles show how a glyph is constructed.", "descriptionZh": "显示度量线、轮廓锚点和贝塞尔手柄，字形从线段构建为曲线。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/glyph-anatomy/", "en": "https://tuneshape.kai-nex.com/en/effects/glyph-anatomy/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/glyph-anatomy", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/glyph-anatomy", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glyph-anatomy/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glyph-anatomy/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "glyph-anatomy", "durationMs": 2200, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "typography": { "kind": "glyph-anatomy", "text": "Glyph", "fontSize": 200, "fontWeight": 800, "color": "#171717", "guideColor": "#737373", "guides": true, "keepPoints": false } } }, { "id": "encrypted-text", "name": "Encrypted Text", "nameZh": "逐字解码", "category": "文字", "description": "Encrypted Text · editable content and live parameters", "descriptionZh": "逐字解码 · 可编辑内容与实时参数", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/encrypted-text/", "en": "https://tuneshape.kai-nex.com/en/effects/encrypted-text/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/encrypted-text", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/encrypted-text", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/encrypted-text/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/encrypted-text/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "encrypted-text", "durationMs": 550, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "encryptedText": { "text": "Lorem ipsum", "charset": "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?", "flipDelayMs": 50, "fontSize": 16, "revealedColor": "#171717", "encryptedColor": "#999999" } } }, { "id": "gooey-input", "name": "Gooey Input", "nameZh": "黏性搜索输入", "category": "控件", "description": "Gooey Input · editable content and live parameters", "descriptionZh": "黏性搜索输入 · 可编辑内容与实时参数", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/gooey-input/", "en": "https://tuneshape.kai-nex.com/en/effects/gooey-input/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/gooey-input", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/gooey-input", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/gooey-input/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/gooey-input/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "gooey-input", "durationMs": 400, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "gooeyInput": { "placeholder": "Search...", "defaultValue": "", "collapsedWidth": 115, "expandedWidth": 200, "expandedOffset": 50, "blur": 5, "height": 40, "bounce": 0.25, "backgroundColor": "#929292", "textColor": "#ffffff", "disabled": false } } }, { "id": "flip-words", "name": "Flip Words", "nameZh": "词语翻替", "category": "文字", "description": "Flip Words · editable content and live parameters", "descriptionZh": "词语翻替 · 可编辑内容与实时参数", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/flip-words/", "en": "https://tuneshape.kai-nex.com/en/effects/flip-words/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/flip-words", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/flip-words", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/flip-words/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/flip-words/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "flip-words", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [], "flipWords": { "words": [ "beautiful", "modern", "interactive", "creative" ], "prefix": "Build", "suffix": "websites with TuneShape", "holdMs": 3000, "staggerMs": 50, "fontSize": 36, "blur": 8, "exitX": 40, "exitY": -40, "exitScale": 2, "textColor": "#737373", "wordColor": "#171717" } } }, { "id": "liquid-carousel", "name": "Liquid Image Carousel", "nameZh": "液态图片轮播", "category": "图片", "description": "A fixed image card with an organic liquid reveal and local refraction originating at the navigation buttons.", "descriptionZh": "固定卡片中的图片从左右按钮位置展开液态覆盖，边界起伏并带局部折射。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/liquid-carousel/", "en": "https://tuneshape.kai-nex.com/en/effects/liquid-carousel/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/liquid-carousel", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/liquid-carousel", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/liquid-carousel/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/liquid-carousel/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "liquid-carousel", "durationMs": 800, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "liquidCarousel": { "items": [ { "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22176%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A", "title": "Orchid orbit" }, { "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22158%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%2264%22%2F%3E%3Crect%20x%3D%22434%22%20y%3D%22116%22%20width%3D%2258%22%20height%3D%2258%22%20fill%3D%22%23dedede%22%2F%3E%3C%2Fsvg%3E%0A", "title": "Fuchsia wave" }, { "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20308a176%20176%200%200%201%20352%200Z%22%20fill%3D%22%23929292%22%2F%3E%3Cpath%20d%3D%22M144%20332a176%20176%200%200%200%20352%200Z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A", "title": "Coral fold" }, { "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%22144%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23dedede%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%22264%22%20width%3D%22232%22%20height%3D%22232%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A", "title": "Rose balance" }, { "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Cpath%20d%3D%22m320%20128%20200%20352H120Z%22%20fill%3D%22%23a0a0a0%22%2F%3E%3Cpath%20d%3D%22m320%20252%2092%20162H228Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E%0A", "title": "Violet steps" }, { "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20184h352M144%20368h352%22%20stroke%3D%22%23929292%22%20stroke-width%3D%2240%22%2F%3E%3Cpath%20d%3D%22M144%20276h352M144%20460h352%22%20stroke%3D%22%23cccccc%22%20stroke-width%3D%2240%22%2F%3E%3C%2Fsvg%3E%0A", "title": "Amber loop" } ], "selectedIndex": 0, "height": 202, "aspect": 0.755939524838013, "radius": 14.2, "border": 4.5, "buttonSize": 19.2, "distortion": 0.2, "edge": 0.1, "autoplay": false, "interval": 1800, "disabled": false } } }, { "id": "coffee-selector", "name": "Selector", "nameZh": "选择器", "category": "控件", "description": "A straight wheel with a crisp center, soft distant rows, inertial dragging and snap selection.", "descriptionZh": "直列滚轮，中心清晰，远处渐隐虚化；拖动后带惯性吸附到最近选项。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/coffee-selector/", "en": "https://tuneshape.kai-nex.com/en/effects/coffee-selector/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/coffee-selector", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/coffee-selector", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/coffee-selector/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/coffee-selector/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "coffee-selector", "durationMs": 460, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "coffeeSelector": { "items": [ "Geisha", "Bourbon", "SL28", "Typica", "Pacamara" ], "selectedIndex": 0, "width": 280, "rowHeight": 48, "radius": 24, "fontSize": 16, "blur": 2.4, "fade": 0.22, "bounce": 0.12, "disabled": false } } }, { "id": "rounded-checks", "name": "Rounded Checkboxes", "nameZh": "圆角复选框", "category": "控件", "description": "Independent native checkboxes with a soft fill and checkmark transition.", "descriptionZh": "可独立勾选的偏好列表，方框填色与勾号柔和过渡。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/rounded-checks/", "en": "https://tuneshape.kai-nex.com/en/effects/rounded-checks/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/rounded-checks", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/rounded-checks", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/rounded-checks/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/rounded-checks/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "rounded-checks", "durationMs": 220, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "roundedChecks": { "items": [ { "label": "Daily summary email", "checked": true }, { "label": "Weekly performance digest", "checked": true }, { "label": "Product release notes", "checked": false } ], "size": 20, "radius": 8, "rowGap": 14, "labelGap": 12, "fontSize": 15, "checkedColor": "#929292", "textColor": "#737373", "boxColor": "#ffffff", "borderColor": "#e3e8ee", "checkColor": "#ffffff", "disabled": false } } }, { "id": "mini-sidebar", "name": "Page Navigation", "nameZh": "页面导航", "category": "导航", "description": "Page Navigation · 400 ms · Ariadne", "descriptionZh": "页面导航 · 400 ms · Ariadne", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/mini-sidebar/", "en": "https://tuneshape.kai-nex.com/en/effects/mini-sidebar/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/mini-sidebar", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/mini-sidebar", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/mini-sidebar/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/mini-sidebar/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "mini-sidebar", "durationMs": 400, "delayMs": 0, "easing": [ 0.4, 0, 0.2, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [ { "part": "item0", "property": "y", "values": [ -10.5, -18 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "item1", "property": "y", "values": [ -3.5, -6 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "item2", "property": "y", "values": [ 3.5, 6 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "item3", "property": "y", "values": [ 10.5, 18 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line0", "property": "width", "values": [ 8, 13.457852349679698 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line0", "property": "opacity", "values": [ 0.2, 0.34554272932479196 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line0", "property": "scaleY", "values": [ 0.76, 0.8182170917299167 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line1", "property": "width", "values": [ 18, 31.061863099396838 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line1", "property": "opacity", "values": [ 0.96, 0.96 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line1", "property": "scaleY", "values": [ 0.76, 0.9689898095903494 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line2", "property": "width", "values": [ 8, 38 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line2", "property": "opacity", "values": [ 0.2, 1 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line2", "property": "scaleY", "values": [ 0.76, 1.08 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line3", "property": "width", "values": [ 8, 27.59279464909526 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line3", "property": "opacity", "values": [ 0.2, 0.7224745239758736 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "line3", "property": "scaleY", "values": [ 0.76, 0.9689898095903494 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "panel", "property": "x", "values": [ -8, 0 ], "times": [ 0, 1 ], "start": 0, "span": 0.8461538461538461 }, { "part": "panel", "property": "y", "values": [ 6, 6 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "panel", "property": "scale", "values": [ 0.96, 1 ], "times": [ 0, 1 ], "start": 0, "span": 0.8461538461538461 }, { "part": "panel", "property": "opacity", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0, "span": 0.5384615384615384 } ] } }, { "id": "text-rise", "name": "Staggered Character Reveal", "nameZh": "文字逐字上移揭示", "category": "文字", "description": "Staggered Character Reveal · 1160 ms · 个人网站", "descriptionZh": "文字逐字上移揭示 · 1160 ms · 个人网站", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/text-rise/", "en": "https://tuneshape.kai-nex.com/en/effects/text-rise/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/text-rise", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/text-rise", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/text-rise/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/text-rise/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "text-rise", "durationMs": 1160, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "char0", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0, "span": 0.7724137931034483 }, { "part": "char1", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.028448275862068967, "span": 0.7724137931034483 }, { "part": "char2", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.056896551724137934, "span": 0.7724137931034483 }, { "part": "char3", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.0853448275862069, "span": 0.7724137931034483 }, { "part": "char4", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.11379310344827587, "span": 0.7724137931034483 }, { "part": "char5", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.14224137931034483, "span": 0.7724137931034483 }, { "part": "char6", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.1706896551724138, "span": 0.7724137931034483 }, { "part": "char7", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.19913793103448277, "span": 0.7724137931034483 }, { "part": "char8", "property": "y", "values": [ "105%", "0%" ], "times": [ 0, 1 ], "start": 0.22758620689655173, "span": 0.7724137931034483 } ] } }, { "id": "text-scramble", "name": "Local Text Scramble and Recovery", "nameZh": "局部字符扰动与恢复", "category": "文字", "description": "Local Text Scramble and Recovery · 200 ms · 个人网站", "descriptionZh": "局部字符扰动与恢复 · 200 ms · 个人网站", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/text-scramble/", "en": "https://tuneshape.kai-nex.com/en/effects/text-scramble/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/text-scramble", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/text-scramble", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/text-scramble/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/text-scramble/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "text-scramble", "durationMs": 200, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [ { "part": "scramble", "property": "textProgress", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "scramble", "property": "y", "values": [ 0, 0 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ] } }, { "id": "glyph-wall", "name": "Glyph Decode Wall", "nameZh": "文字解码墙", "category": "文字", "description": "Glyph Decode Wall · 2600 ms · 原创实现", "descriptionZh": "文字解码墙 · 2600 ms · 原创实现", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/glyph-wall/", "en": "https://tuneshape.kai-nex.com/en/effects/glyph-wall/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/glyph-wall", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/glyph-wall", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glyph-wall/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/glyph-wall/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "glyph-wall", "durationMs": 2600, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "wall", "property": "glyphPhase", "values": [ 0, 1 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ], "wall": { "words": "HELLO|TUNESHAPE|EXPLORE|CREATE|IDEA|OROCOA", "layout": "scatter", "direction": "down", "charset": "letters", "fontSize": 14, "density": 0.7, "wallOpacity": 0.1, "scrambleHz": 12, "holdMs": 5000, "restMs": 800, "stagger": 0.5, "bandWidth": 0.09, "shuffle": true, "color": "#171717", "noiseColor": "#777777" } } }, { "id": "hover-preview", "name": "Hover Preview", "nameZh": "文字悬停图片", "category": "图片", "description": "Inline words reveal a floating image that follows the pointer.", "descriptionZh": "文字悬停时浮出图片，随指针轻微偏移和倾斜。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/hover-preview/", "en": "https://tuneshape.kai-nex.com/en/effects/hover-preview/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/hover-preview", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/hover-preview", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/hover-preview/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/hover-preview/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "hover-preview", "durationMs": 200, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "hoverPreview": { "imagePosition": "above", "exitMs": 150, "maxRotation": 12, "maxOffset": 15, "imageSize": 200, "aspect": 1, "radius": 12, "shadow": true, "targetPadding": 4 } } }, { "id": "album-rail", "name": "Album Rail", "nameZh": "唱片轨道", "category": "图片", "description": "A fan of album sleeves, with records that slide out and spin.", "descriptionZh": "唱片封套沿扇形展开，悬停探出黑胶，点击后抽出旋转。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/album-rail/", "en": "https://tuneshape.kai-nex.com/en/effects/album-rail/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/album-rail", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/album-rail", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/album-rail/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/album-rail/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "album-rail", "durationMs": 650, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [], "album": { "aspect": 1, "size": 0.62, "spread": 0.58, "stack": 0.5, "fan": 6, "turn": 22, "depth": 0.5, "visible": 3, "radius": 14, "rpm": 33, "interval": 4, "vinyl": true, "autoplay": true, "albumAccent": true, "accentColor": "#5227ff", "backgroundColor": "#f1f1f1" } } }, { "id": "orbit-reel", "name": "Orbit Reel", "nameZh": "卡片转轮", "category": "图片", "description": "A rotating ring of cards opens into a navigable arc.", "descriptionZh": "旋转的卡片圆环，点击后展开为可切换的弧形。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/orbit-reel/", "en": "https://tuneshape.kai-nex.com/en/effects/orbit-reel/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/orbit-reel", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/orbit-reel", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/orbit-reel/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/orbit-reel/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "orbit-reel", "durationMs": 700, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [], "orbit": { "defaultView": "ring", "count": 18, "spin": 8, "interval": 3.5, "arc": 1, "aspect": 0.8, "radius": 0.07, "gap": 0.18, "autoplay": true, "tilt": true, "flipWave": true, "pauseOnHover": true, "accentColor": "#171717", "backgroundColor": "#F1F1F1" } } }, { "id": "elastic-reel", "name": "Elastic Reel", "nameZh": "弹性相片卷", "category": "图片", "description": "Elastic image slices with pointer magnification and click-to-open images.", "descriptionZh": "窄幅图像随指针联动放大，点击弹性展开为完整画面。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/elastic-reel/", "en": "https://tuneshape.kai-nex.com/en/effects/elastic-reel/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/elastic-reel", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/elastic-reel", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/elastic-reel/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/elastic-reel/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "elastic-reel", "durationMs": 800, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [], "reel": { "barWidth": 44, "barHeight": 0.5, "gap": 10, "radius": 12, "magnify": 2.4, "influence": 200, "openSize": 0.72, "openAspect": 1, "elasticity": 0.35, "align": "center", "autoplay": "sweep", "speed": 1.4, "interval": 4 } } }, { "id": "dots", "name": "Staggered Loading Dots", "nameZh": "三点交错跳动", "category": "状态指示", "description": "Staggered Loading Dots · 1200 ms · Ariadne", "descriptionZh": "三点交错跳动 · 1200 ms · Ariadne", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/dots/", "en": "https://tuneshape.kai-nex.com/en/effects/dots/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/dots", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/dots", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/dots/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/dots/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "dots", "durationMs": 1200, "delayMs": 0, "easing": [ 0.42, 0, 0.58, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "dot0", "property": "y", "values": [ 0, -4, 0, 0 ], "times": [ 0, 0.3, 0.6, 1 ], "start": 0, "span": 0.75 }, { "part": "dot0", "property": "opacity", "values": [ 0.4, 1, 0.4, 0.4 ], "times": [ 0, 0.3, 0.6, 1 ], "start": 0, "span": 0.75 }, { "part": "dot1", "property": "y", "values": [ 0, -4, 0, 0 ], "times": [ 0, 0.3, 0.6, 1 ], "start": 0.125, "span": 0.75 }, { "part": "dot1", "property": "opacity", "values": [ 0.4, 1, 0.4, 0.4 ], "times": [ 0, 0.3, 0.6, 1 ], "start": 0.125, "span": 0.75 }, { "part": "dot2", "property": "y", "values": [ 0, -4, 0, 0 ], "times": [ 0, 0.3, 0.6, 1 ], "start": 0.25, "span": 0.75 }, { "part": "dot2", "property": "opacity", "values": [ 0.4, 1, 0.4, 0.4 ], "times": [ 0, 0.3, 0.6, 1 ], "start": 0.25, "span": 0.75 } ] } }, { "id": "finger-tap", "name": "Finger Tapping", "nameZh": "手指敲击", "category": "状态指示", "description": "Finger Tapping · 1200 ms · Uiverse.io · Pradeepsaranbishnoi", "descriptionZh": "手指敲击 · 1200 ms · Uiverse.io · Pradeepsaranbishnoi", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/finger-tap/", "en": "https://tuneshape.kai-nex.com/en/effects/finger-tap/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/finger-tap", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/finger-tap", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/finger-tap/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/finger-tap/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "finger-tap", "durationMs": 1200, "delayMs": 0, "easing": [ 0.42, 0, 0.58, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "finger0", "property": "rotate", "values": [ 10, 50, 10, 10 ], "times": [ 0, 0.4, 0.5, 1 ], "start": 0, "span": 1 }, { "part": "finger0", "property": "scale", "values": [ 0.4, 0.4 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "finger1", "property": "rotate", "values": [ 10, 10, 50, 10, 10 ], "times": [ 0, 0.08333333333333333, 0.48333333333333334, 0.5833333333333334, 1 ], "start": 0, "span": 1 }, { "part": "finger1", "property": "scale", "values": [ 0.6, 0.6 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "finger2", "property": "rotate", "values": [ 10, 10, 50, 10, 10 ], "times": [ 0, 0.16666666666666666, 0.5666666666666667, 0.6666666666666666, 1 ], "start": 0, "span": 1 }, { "part": "finger2", "property": "scale", "values": [ 0.8, 0.8 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "finger3", "property": "rotate", "values": [ 10, 10, 50, 10, 10 ], "times": [ 0, 0.25, 0.65, 0.75, 1 ], "start": 0, "span": 1 }, { "part": "finger3", "property": "scale", "values": [ 1, 1 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ] } }, { "id": "typewriter", "name": "Typewriter", "nameZh": "打字机", "category": "状态指示", "description": "Typewriter · 3000 ms · Uiverse.io · Nawsome", "descriptionZh": "打字机 · 3000 ms · Uiverse.io · Nawsome", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/typewriter/", "en": "https://tuneshape.kai-nex.com/en/effects/typewriter/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/typewriter", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/typewriter", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/typewriter/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/typewriter/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "typewriter", "durationMs": 3000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "machine", "property": "y", "values": [ 0, 0, -4, 0, 2, 0 ], "times": [ 0, 0.85, 0.89, 0.92, 0.95, 1 ], "start": 0, "span": 1 }, { "part": "carriage", "property": "x", "values": [ 14, 14, 13.73639, 13.24163, 12.51635, 11.63805, 10.73192, 9.89348, 9.16164, 8.53968, 8.01717, 7.58077, 7.21798, 6.91817, 6.67253, 6.47388, 6.31633, 6.195, 6.10584, 6.04547, 6.011, 6, 6, 5.80229, 5.43122, 4.88726, 4.22853, 3.54894, 2.92011, 2.37123, 1.90476, 1.51288, 1.18558, 0.91349, 0.68862, 0.5044, 0.35541, 0.23725, 0.14625, 0.07938, 0.0341, 0.00825, 0, 0, -0.13181, -0.37919, -0.74183, -1.18098, -1.63404, -2.05326, -2.41918, -2.73016, -2.99141, -3.20961, -3.39101, -3.54092, -3.66374, -3.76306, -3.84184, -3.9025, -3.94708, -3.97727, -3.9945, -4, -4, -4.26361, -4.75837, -5.48365, -6.36195, -7.26808, -8.10652, -8.83836, -9.46032, -9.98283, -10.41923, -10.78202, -11.08183, -11.32747, -11.52612, -11.68367, -11.805, -11.89416, -11.95453, -11.989, -12, -12, -11.14326, -9.5353, -7.17813, -4.32365, -1.37872, 1.34619, 3.72466, 5.74605, 7.44419, 8.86249, 10.04155, 11.01596, 11.81428, 12.45988, 12.97193, 13.36626, 13.65601, 13.85223, 13.96424, 14 ], "times": [ 0, 0.05, 0.055, 0.06, 0.065, 0.07, 0.075, 0.08, 0.085, 0.09, 0.095, 0.1, 0.105, 0.11, 0.115, 0.12, 0.125, 0.13, 0.135, 0.14, 0.145, 0.15, 0.3, 0.305, 0.31, 0.315, 0.32, 0.325, 0.33, 0.335, 0.34, 0.345, 0.35, 0.355, 0.36, 0.365, 0.37, 0.375, 0.38, 0.385, 0.39, 0.395, 0.4, 0.55, 0.555, 0.56, 0.565, 0.57, 0.575, 0.58, 0.585, 0.59, 0.595, 0.6, 0.605, 0.61, 0.615, 0.62, 0.625, 0.63, 0.635, 0.64, 0.645, 0.65, 0.7, 0.705, 0.71, 0.715, 0.72, 0.725, 0.73, 0.735, 0.74, 0.745, 0.75, 0.755, 0.76, 0.765, 0.77, 0.775, 0.78, 0.785, 0.79, 0.795, 0.8, 0.89, 0.8955, 0.901, 0.9065, 0.912, 0.9175, 0.923, 0.9285, 0.934, 0.9395, 0.945, 0.9505, 0.956, 0.9615, 0.967, 0.9725, 0.978, 0.9835, 0.989, 0.9945, 1 ], "start": 0, "span": 1 }, { "part": "paper", "property": "y", "values": [ 46, 46, 34, 34, 22, 22, 10, 10, 0, 0, 46, 46 ], "times": [ 0, 0.05, 0.2, 0.3, 0.4, 0.55, 0.65, 0.7, 0.8, 0.85, 0.92, 1 ], "start": 0, "span": 1 }, { "part": "key0", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.05, 0.09, 0.12, 1 ], "start": 0, "span": 1 }, { "part": "key1", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.48, 0.54, 0.57, 1 ], "start": 0, "span": 1 }, { "part": "key2", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.66, 0.72, 0.75, 1 ], "start": 0, "span": 1 }, { "part": "key3", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.12, 0.18, 0.21, 1 ], "start": 0, "span": 1 }, { "part": "key4", "property": "y", "values": [ 0, 0 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "key5", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.39, 0.45, 0.48, 1 ], "start": 0, "span": 1 }, { "part": "key6", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.21, 0.27, 0.3, 1 ], "start": 0, "span": 1 }, { "part": "key7", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.75, 0.81, 0.84, 1 ], "start": 0, "span": 1 }, { "part": "key8", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.3, 0.36, 0.39, 1 ], "start": 0, "span": 1 }, { "part": "key9", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.3, 0.36, 0.39, 1 ], "start": 0, "span": 1 }, { "part": "key10", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.3, 0.36, 0.39, 1 ], "start": 0, "span": 1 }, { "part": "key11", "property": "y", "values": [ 0, 0, 2, 0, 0 ], "times": [ 0, 0.57, 0.63, 0.66, 1 ], "start": 0, "span": 1 } ] } }, { "id": "yin-yang", "name": "Yin Yang Loader", "nameZh": "太极加载", "category": "状态指示", "description": "Yin Yang Loader · 3000 ms · Uiverse.io · fthisilak", "descriptionZh": "太极加载 · 3000 ms · Uiverse.io · fthisilak", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/yin-yang/", "en": "https://tuneshape.kai-nex.com/en/effects/yin-yang/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/yin-yang", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/yin-yang", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/yin-yang/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/yin-yang/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "yin-yang", "durationMs": 3000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "face", "property": "rotate", "values": [ 0, -360 ], "times": [ 0, 1 ], "start": 0, "span": 1 }, { "part": "dot0", "property": "scale", "values": [ 1, 1.000483, 1.001972, 1.004521, 1.008166, 1.012916, 1.01874, 1.025549, 1.033188, 1.041434, 1.05, 1.058566, 1.066812, 1.074451, 1.08126, 1.087084, 1.091834, 1.095479, 1.098028, 1.099517, 1.1, 1.099517, 1.098028, 1.095479, 1.091834, 1.087084, 1.08126, 1.074451, 1.066812, 1.058566, 1.05, 1.041434, 1.033188, 1.025549, 1.01874, 1.012916, 1.008166, 1.004521, 1.001972, 1.000483, 1 ], "times": [ 0, 0.025, 0.05, 0.075, 0.1, 0.125, 0.15, 0.175, 0.2, 0.225, 0.25, 0.275, 0.3, 0.325, 0.35, 0.375, 0.4, 0.425, 0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.675, 0.7, 0.725, 0.75, 0.775, 0.8, 0.825, 0.85, 0.875, 0.9, 0.925, 0.95, 0.975, 1 ], "start": 0, "span": 1 }, { "part": "dot1", "property": "scale", "values": [ 1, 1.000483, 1.001972, 1.004521, 1.008166, 1.012916, 1.01874, 1.025549, 1.033188, 1.041434, 1.05, 1.058566, 1.066812, 1.074451, 1.08126, 1.087084, 1.091834, 1.095479, 1.098028, 1.099517, 1.1, 1.099517, 1.098028, 1.095479, 1.091834, 1.087084, 1.08126, 1.074451, 1.066812, 1.058566, 1.05, 1.041434, 1.033188, 1.025549, 1.01874, 1.012916, 1.008166, 1.004521, 1.001972, 1.000483, 1 ], "times": [ 0, 0.025, 0.05, 0.075, 0.1, 0.125, 0.15, 0.175, 0.2, 0.225, 0.25, 0.275, 0.3, 0.325, 0.35, 0.375, 0.4, 0.425, 0.45, 0.475, 0.5, 0.525, 0.55, 0.575, 0.6, 0.625, 0.65, 0.675, 0.7, 0.725, 0.75, 0.775, 0.8, 0.825, 0.85, 0.875, 0.9, 0.925, 0.95, 0.975, 1 ], "start": 0, "span": 1 } ] } }, { "id": "pulse", "name": "Pulse Scale and Ripple", "nameZh": "脉冲缩放与扩散", "category": "状态指示", "description": "Pulse Scale and Ripple · 1300 ms · Ariadne", "descriptionZh": "脉冲缩放与扩散 · 1300 ms · Ariadne", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/pulse/", "en": "https://tuneshape.kai-nex.com/en/effects/pulse/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/pulse", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/pulse", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/pulse/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/pulse/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "pulse", "durationMs": 1300, "delayMs": 0, "easing": [ 0.42, 0, 0.58, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "face", "property": "scale", "values": [ 0.9, 1.06, 0.9 ], "times": [ 0, 0.5, 1 ], "start": 0, "span": 1 }, { "part": "halo", "property": "scale", "values": [ 1, 2.8, 1 ], "times": [ 0, 0.5, 1 ], "start": 0, "span": 1 }, { "part": "halo", "property": "opacity", "values": [ 0.16, 0, 0.16 ], "times": [ 0, 0.5, 1 ], "start": 0, "span": 1 } ] } }, { "id": "watercolor", "name": "Watercolor Blend", "nameZh": "水彩融合", "category": "背景", "description": "Five gradient-noise layers blend two colors into a smooth, grain-free wash with optional pointer warping.", "descriptionZh": "五层渐变噪声形成柔和的双颜色水彩，无纸面颗粒，支持局部指针晕染。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/watercolor/", "en": "https://tuneshape.kai-nex.com/en/effects/watercolor/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/watercolor", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/watercolor", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/watercolor/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/watercolor/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "watercolor", "durationMs": 12000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "watercolor", "property": "watercolorTime", "values": [ 0, 12 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ], "watercolor": { "color1": "#0A0A0A", "color2": "#E0E0E0", "speed": 0.6, "scale": 0.6, "warpSpeed": 0.08, "opacity": 1, "brightness": 0.15, "cursorInteraction": false, "cursorIntensity": 1 } } }, { "id": "watercolor-original", "name": "Watercolor Original", "nameZh": "水彩模糊", "category": "背景", "description": "Six noise layers and paper grain create the layered wash of the original watercolor.", "descriptionZh": "六层噪声与纸面细颗粒叠成流动水彩，保留首版的多层晕染。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/watercolor-original/", "en": "https://tuneshape.kai-nex.com/en/effects/watercolor-original/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/watercolor-original", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/watercolor-original", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/watercolor-original/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/watercolor-original/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "watercolor-original", "durationMs": 12000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "watercolor", "property": "watercolorTime", "values": [ 0, 12 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ], "watercolor": { "color1": "#0A0A0A", "color2": "#E0E0E0", "speed": 0.6, "scale": 0.6, "warpSpeed": 0.08, "opacity": 1, "brightness": 0.15, "cursorInteraction": false, "cursorIntensity": 1 } } }, { "id": "watercolor-flow", "name": "Watercolor Flow", "nameZh": "细度水彩融合", "category": "背景", "description": "Six gradient-noise layers create fine watercolor bands that blend through a double warp field.", "descriptionZh": "六层渐变噪声带来更细密的水彩纹理，流动色带沿双重扭曲场交融。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/watercolor-flow/", "en": "https://tuneshape.kai-nex.com/en/effects/watercolor-flow/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/watercolor-flow", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/watercolor-flow", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/watercolor-flow/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/watercolor-flow/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "watercolor-flow", "durationMs": 12000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "watercolor", "property": "watercolorTime", "values": [ 0, 12 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ], "watercolor": { "color1": "#0A0A0A", "color2": "#E0E0E0", "speed": 0.6, "scale": 0.6, "warpSpeed": 0.08, "opacity": 1, "brightness": 0.15, "cursorInteraction": false, "cursorIntensity": 1 } } }, { "id": "ascii-sharks", "name": "ASCII Sharks", "nameZh": "ASCII 鲨鱼群", "category": "背景", "description": "Top-down sharks and small fish drawn on a configurable character grid.", "descriptionZh": "俯视游动的鲨鱼与小鱼，以可调密度的字符网格构成动态背景。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/ascii-sharks/", "en": "https://tuneshape.kai-nex.com/en/effects/ascii-sharks/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/ascii-sharks", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/ascii-sharks", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/ascii-sharks/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/ascii-sharks/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "ascii-sharks", "durationMs": 12000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [], "asciiSharks": { "density": 2, "fontScale": 0.9, "speed": 1.7, "sharkCount": 4, "sharkScale": 1, "fishDensity": 1, "backgroundColor": "#eeeeee", "inkColor": "#303030", "opacity": 0.9, "gridOpacity": 0.04, "wakeOpacity": 0, "interactive": false } } }, { "id": "particle-tide", "name": "Particle Tide", "nameZh": "粒子海浪", "category": "背景", "description": "An original ocean of particles with rolling swells and click ripples.", "descriptionZh": "粒子构成连续起伏的海面，可移动指针涌浪、点击叠加涟漪。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/particle-tide/", "en": "https://tuneshape.kai-nex.com/en/effects/particle-tide/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/particle-tide", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/particle-tide", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/particle-tide/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/particle-tide/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "particle-tide", "durationMs": 12000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "ocean", "property": "tideTime", "values": [ 0, 12 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ], "tide": { "backgroundColor": "#242426", "waterColor": "#B9B9C2", "crestColor": "#FFFFFF", "density": 1, "particleSize": 1, "waveHeight": 1, "wavelength": 1, "speed": 1, "interactive": true, "clickRipples": true } } }, { "id": "ascii-wave", "name": "ASCII Wave Animation", "nameZh": "ASCII 波形动画", "category": "背景", "description": "ASCII Wave Animation · 4000 ms · Ariadne", "descriptionZh": "ASCII 波形动画 · 4000 ms · Ariadne", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/ascii-wave/", "en": "https://tuneshape.kai-nex.com/en/effects/ascii-wave/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/ascii-wave", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/ascii-wave", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/ascii-wave/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/ascii-wave/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "ascii-wave", "durationMs": 4000, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": true, "interruption": "retarget", "tracks": [ { "part": "ascii", "property": "asciiPhase", "values": [ 0, 6.283185307 ], "times": [ 0, 1 ], "start": 0, "span": 1 } ], "ascii": { "characters": "cyslap", "opacity": 0.77, "fontSize": 6.8, "density": 1.1, "speed": 2.8, "direction": 65, "twist": 2, "tension": 0.4, "color": "#212121", "pointerStrength": 1, "pointerRadius": 100 } } }, { "id": "soap-bubble", "name": "Soap Bubble UI", "nameZh": "肥皂泡控件", "category": "控件", "description": "Interactive controls with a flowing interference film, glass refraction and pointer reflections.", "descriptionZh": "带流动干涉色膜、玻璃折射和指针反射的原生交互控件。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/soap-bubble/", "en": "https://tuneshape.kai-nex.com/en/effects/soap-bubble/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/soap-bubble", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/soap-bubble", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/soap-bubble/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/soap-bubble/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "soap-bubble", "durationMs": 500, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "soapBubble": { "wobble": 0.4, "speed": 1, "seed": 7, "seeThrough": 0.3, "seeThroughBend": 0.3, "refraction": 0.15, "opacity": 0, "oilOpacity": 1, "uiScale": 1, "radius": 40, "glass": 0.95, "iridescence": 0.5, "filmScale": 4.85, "oilCoverage": 0.73, "oilEdge": 18, "oilEdgeFade": 2.33, "clearCenter": 0.57, "thickness": 480, "drainage": 0.35, "swirl": 0.5, "reflectivity": 1.3, "dispersion": 1, "bevel": 14, "mirage": 0.7, "reach": 2, "tilt": 1, "windowSize": 0.75, "windowWidth": 0.8, "windowHead": 0.7, "windowTail": 0.6, "windowIntensity": 0.85, "windowGradient": 0.96, "windowLength": 1.3, "windowMargin": 0.85, "windowBend": 0.75, "glintSize": 1.65, "glintIntensity": 0, "glintDistance": -0.45, "glintHeight": 0.65, "topLength": 1, "topFade": 0.4, "topTail": 1, "maxDpr": 2, "element": "showcase", "page": "neutral", "backdrop": "plain", "pop": "droplets", "soapPalette": "natural", "environment": "auto", "windowStyle": "edge", "glintShape": "auto", "windowTwinShape": "mirror", "paused": false, "windowLight": false, "windowTwin": false, "keyLight": true, "bottomShade": false, "defaultChecked": true, "disabled": false, "tint": "auto", "soapColor": "auto", "soapShadeColor": "auto", "soapHighlightColor": "auto", "bottomShadeColor": "#ffffff", "soapPaletteRed": "#ff6685", "soapPaletteGold": "#f6d365", "soapPaletteGreen": "#83e8a9", "soapPaletteCyan": "#60dce9", "soapPaletteBlue": "#7799ff", "soapPaletteViolet": "#c084fc", "toggleColor": "#28c64f", "sliderFrom": "#0986ff", "sliderTo": "#9d7bff", "buttonText": "Continue", "searchPlaceholder": "Search", "menuFirst": "Select chats", "menuSecond": "Read all", "sliderLabel": "Volume", "sliderValue": 40 } } }, { "id": "topographic-flow", "name": "Topographic Flow", "nameZh": "流动等高线", "category": "背景", "description": "An evolving contour map with elevation colours, survey dashes and five pointer deformation modes.", "descriptionZh": "持续演变的等高线地图，可叠加高程配色、测绘虚线和五种指针形变。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/topographic-flow/", "en": "https://tuneshape.kai-nex.com/en/effects/topographic-flow/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/topographic-flow", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/topographic-flow", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/topographic-flow/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/topographic-flow/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "topographic-flow", "durationMs": 800, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "topographicFlow": { "scale": 480, "density": 5, "distortion": 2.4, "seed": 42, "lineWidth": 1, "opacity": 1, "dashLength": 7, "dashGap": 8, "gradientDiffusion": 0, "grain": 0, "speed": 1.5, "hoverStrength": 0.6, "hoverRadius": 200, "hoverFollow": 0.16, "hoverFade": 0.8, "lineStyle": "solid", "backgroundColor": "#f1f1f1", "lineColor": "#000000", "accentColor": "#000000", "gradientEnabled": false, "gradientColors": [ "#2359eb", "#12c4eb", "#14c87f", "#ffe22e", "#ff932f", "#f53f42" ], "hoverEffect": "rings", "hoverDirection": "push", "hoverEnabled": true, "animateEntrance": true, "paused": false } } }, { "id": "chromatic-button", "name": "Chromatic Button", "nameZh": "流彩按钮", "category": "控件", "description": "A tactile chromatic button with projected reflections, whole-material colour flow and native interactions.", "descriptionZh": "带球面反射、整体换色与真实按钮交互的流彩材质。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/chromatic-button/", "en": "https://tuneshape.kai-nex.com/en/effects/chromatic-button/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/chromatic-button", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/chromatic-button", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/chromatic-button/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/chromatic-button/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "chromatic-button", "durationMs": 700, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "chromaticButton": { "example": "message", "hoverEffect": "brighten", "entrance": "blur-up", "colorMode": "spectrum", "color": "#b126ff", "color2": "#ff177c", "color3": "#35d3ff", "label": "Get started", "disabled": false, "paused": false, "entranceSpeed": 1, "entranceBlur": 10, "entranceDistance": 20, "entranceScale": 0.65, "borderRadius": 50, "feather": 100, "projectionScale": 174.7, "intensity": 1.4, "grain": 0.105, "speed": 0.7, "phase": 0, "seed": 7 } } }, { "id": "liquid-glass-logo", "name": "Liquid Glass Logo", "nameZh": "液态玻璃 Logo", "category": "文字", "description": "A droplet forms a refractive glass tile, then its glass and rings dissolve into the resting logo on the shared #f1f1f1 gray surface.", "descriptionZh": "液滴聚合成折射玻璃图标，玻璃与波纹消退后保留正常大小的 Logo；默认使用统一的 #f1f1f1 灰色画布。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/liquid-glass-logo/", "en": "https://tuneshape.kai-nex.com/en/effects/liquid-glass-logo/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/liquid-glass-logo", "source": "https://github.com/orocoa/TuneShape/tree/main/effects/examples/liquid-glass-logo", "sourceDocumentation": { "zh": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/liquid-glass-logo/README.zh-CN.md", "en": "https://github.com/orocoa/TuneShape/blob/main/effects/examples/liquid-glass-logo/README.md" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "liquid-glass-logo", "durationMs": 1800, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "liquidGlassLogo": { "logoKind": "tuneshape", "text": "tuneshape", "logoSrc": "", "logoName": "", "backgroundSrc": "", "backgroundName": "", "originalColors": false, "tile": true, "logoColor": "#09111b", "tileColor": "#f1f1f1", "backgroundColor": "#f1f1f1", "transparentBackground": false, "backgroundTint": "#000000", "loop": false, "paused": false, "exportType": "video", "exportFormat": "mp4", "exportRatio": "16:9", "exportResolution": 1080, "exportFps": 60, "logoSize": 256, "logoScale": 0.72, "finalLogoScale": 1, "logoRelief": 1, "depth": 2.9, "dispersion": 1, "relief": 1, "caustics": 1, "highlights": 1, "echoTint": 0.5, "innerWallFocus": 0, "bloom": 0.55, "dropStrength": 1, "decay": 1.4, "speed": 1, "loopDelay": 1.6, "backgroundX": 0, "backgroundY": 0, "backgroundScale": 1, "backgroundTintOpacity": 0, "maxDpr": 2, "exportFrame": 0.9 } } }, { "id": "skiper-106", "name": "Smooth Caret Input", "nameZh": "平滑光标输入框", "category": "控件", "description": "A spring-driven caret follows native text selection, beside a regular input for comparison.", "descriptionZh": "弹簧光标跟随原生文本选区，保留标准输入作对照。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-106/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-106/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-106", "source": "https://skiper-ui.com/v1/skiper106", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper106", "en": "https://skiper-ui.com/v1/skiper106" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-106", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "placeholder": "smooth input", "comparisonPlaceholder": "normal input", "initialValue": "", "inputType": "text", "fontSize": 24, "fieldWidth": 420, "stiffness": 500, "damping": 30, "mass": 0.5, "background": "#f5f4f3", "fieldBackground": "#fcfcfc", "textColor": "#121212" } } }, { "id": "skiper-46", "name": "Next.js Gooey Menu", "nameZh": "黏连状态菜单", "category": "导航", "description": "A black circular mark and three-row status tooltip expand through a gooey SVG filter.", "descriptionZh": "黑色圆形标志与三行状态气泡通过 SVG 黏连滤镜展开和收合。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-46/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-46/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-46", "source": "https://skiper-ui.com/v1/skiper46", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper46", "en": "https://skiper-ui.com/v1/skiper46" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-46", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "name": "Next.js", "version": "v13.4.8", "errorLabel": "Errors", "errors": "3", "routeLabel": "Route", "route": "Static", "buttonSize": 40, "panelWidth": 200, "gooBlur": 4.4, "lift": 50, "background": "#ffffff", "panelColor": "#000000", "textColor": "#ffffff", "errorColor": "#fb2c36" } } }, { "id": "skiper-98", "name": "Vertical Tooltip Menu", "nameZh": "竖向裁切提示菜单", "category": "导航", "description": "Three vertically stacked icons share a clipped tooltip that follows hover and keyboard focus.", "descriptionZh": "三枚竖向图标共享一个裁切提示层，提示随悬停和键盘聚焦滑动。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-98/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-98/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-98", "source": "https://skiper-ui.com/v1/skiper98", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper98", "en": "https://skiper-ui.com/v1/skiper98" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-98", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "comment": "Comment", "share": "Share", "menu": "Menu", "side": "left", "badge": true, "iconSize": 32, "gap": 8, "background": "#f5f4f3", "menuColor": "#000000", "textColor": "#ffffff", "badgeColor": "#00a6f4" } } }, { "id": "skiper-92", "name": "Vercel Command Search", "nameZh": "变形命令搜索", "category": "控件", "description": "A compact search trigger morphs into a grouped command panel with filtering, arrow-key selection and Escape.", "descriptionZh": "紧凑搜索入口变形成分组命令面板，可搜索、方向键选择、Esc 收起。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-92/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-92/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-92", "source": "https://skiper-ui.com/v1/skiper92", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper92", "en": "https://skiper-ui.com/v1/skiper92" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-92", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "placeholder": "Find...", "shortcut": "F", "suggestions": "Calendar\nSearch Emoji\nCalculator\nDocuments\nImages\nMusic", "settings": "Profile\nBilling\nSettings\nNotifications\nMessages\nSecurity", "help": "FAQ\nContact Support", "docs": "Documentation\nTutorials", "panelWidth": 384, "listHeight": 300, "background": "#f5f4f3", "panelColor": "#f5f4f3", "textColor": "#121212" } } }, { "id": "skiper-48", "name": "Card Swipe Carousel", "nameZh": "卡片堆叠滑动轮播", "category": "图片", "description": "Drag a stack of geometric image cards, with depth and rotation on the cards behind, and snap on release.", "descriptionZh": "拖拽站内几何图片卡片，后方卡片以旋转和纵深堆叠，松手吸附到上一张或下一张。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-48/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-48/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-48", "source": "https://skiper-ui.com/v1/skiper48", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper48", "en": "https://skiper-ui.com/v1/skiper48" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-48", "durationMs": 300, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "images": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22176%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22158%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%2264%22%2F%3E%3Crect%20x%3D%22434%22%20y%3D%22116%22%20width%3D%2258%22%20height%3D%2258%22%20fill%3D%22%23dedede%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20308a176%20176%200%200%201%20352%200Z%22%20fill%3D%22%23929292%22%2F%3E%3Cpath%20d%3D%22M144%20332a176%20176%200%200%200%20352%200Z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%22144%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23dedede%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%22264%22%20width%3D%22232%22%20height%3D%22232%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Cpath%20d%3D%22m320%20128%20200%20352H120Z%22%20fill%3D%22%23a0a0a0%22%2F%3E%3Cpath%20d%3D%22m320%20252%2092%20162H228Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20184h352M144%20368h352%22%20stroke%3D%22%23929292%22%20stroke-width%3D%2240%22%2F%3E%3Cpath%20d%3D%22M144%20276h352M144%20460h352%22%20stroke%3D%22%23cccccc%22%20stroke-width%3D%2240%22%2F%3E%3C%2Fsvg%3E%0A", "selectedIndex": 0, "cardWidth": 260, "cardHeight": 330, "radius": 24, "offset": 8, "rotation": 2, "depth": 100, "background": "#f5f4f3", "loop": true, "autoplay": false, "interval": 1000, "showNavigation": false, "showPagination": false } } }, { "id": "skiper-91", "name": "Elastic Video Player", "nameZh": "弹性拖动视频播放器", "category": "图片", "description": "A portrait video with an elastic scrubber, hover time marker and animated playback feedback.", "descriptionZh": "竖屏视频配合可拉伸进度条、悬停时间标记与播放反馈。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-91/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-91/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-91", "source": "https://skiper-ui.com/v1/skiper91", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper91", "en": "https://skiper-ui.com/v1/skiper91" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-91", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "videoUrl": "/video/skiper-91.mp4", "poster": "", "videoHeight": 500, "videoRadius": 32, "panelRadius": 50, "panelColor": "#f1f1f1", "background": "#f1f1f1", "trackColor": "#f5f5f5", "progressColor": "#404040", "markerColor": "#f97316", "railWidth": 400, "barHeight": 6, "stretch": 24, "showTime": true, "muted": true, "volume": 0.8, "loop": false } } }, { "id": "skiper-81", "name": "AI Multi Mode Input", "nameZh": "AI 多模式输入框", "category": "控件", "description": "A multiline composer with attachments, Search, DeepMind and model selection. Submission stays in the local demo.", "descriptionZh": "带附件、搜索、DeepMind 和模型选择的多行输入；提交内容只保存在当前演示。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-81/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-81/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-81", "source": "https://skiper-ui.com/v1/skiper81", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper81", "en": "https://skiper-ui.com/v1/skiper81" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-81", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "placeholder": "Ask Anything", "watermark": "Skiper llm 0.3", "showWatermark": true, "inputWidth": 744, "fontSize": 16, "cornerRadius": 16, "background": "#f1f1f1", "inputColor": "#f9f8f8", "buttonColor": "#f9f8f8", "textColor": "#121212", "accent": "#0ea5e9", "models": "GPT-4o\nClaude 3.5 Sonnet\nGemini Pro\nLlama 3.1", "initialModel": "GPT-4o", "searchDefault": false, "deepDefault": false, "replyText": "I dunnoo 😭", "replyDelay": 1000, "demoText": "Plan a studio" } } }, { "id": "skiper-82", "name": "Rainbow Send Input", "nameZh": "彩虹发送输入框", "category": "控件", "description": "A compact message input with a rainbow send wave, rotating arrow and local message stack.", "descriptionZh": "紧凑消息输入在发送时展开彩色光带、旋转箭头，并堆叠本地消息。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-82/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-82/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-82", "source": "https://skiper-ui.com/v1/skiper82", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper82", "en": "https://skiper-ui.com/v1/skiper82" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-82", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "placeholder": "Send Message", "inputWidth": 512, "fontSize": 16, "cornerRadius": 24, "background": "#f1f1f1", "inputColor": "#ffffff", "buttonColor": "#f5f4f3", "textColor": "#000000", "pink": "#fc2ba3", "orange": "#fc6d35", "yellow": "#f9c83d", "blue": "#144ec5", "soundEnabled": true, "replyText": "Lock in vro 😵", "replyDelay": 1000, "demoText": "A little more color" } } }, { "id": "skiper-83", "name": "Integration Mention Input", "nameZh": "集成提及输入框", "category": "控件", "description": "Recognizes @yt, @google and @notion, expands integration cards and sends them with local messages.", "descriptionZh": "识别 @yt、@google、@notion，展开集成卡片并随消息发送；保持本地演示。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-83/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-83/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-83", "source": "https://skiper-ui.com/v1/skiper83", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper83", "en": "https://skiper-ui.com/v1/skiper83" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-83", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "placeholder": "Type shit..", "inputWidth": 512, "fontSize": 24, "cornerRadius": 29, "background": "#f1f1f1", "inputColor": "#f5f4f3", "textColor": "#121212", "buttonColor": "#ffffff", "youtubeLabel": "Youtube Analyzer", "googleLabel": "Google Search", "notionLabel": "Notion", "soundEnabled": true, "pink": "#fc2ba3", "orange": "#fc6d35", "yellow": "#f9c83d", "blue": "#c2d6e1", "demoText": "Find @yt about design" } } }, { "id": "skiper-41", "name": "Progressive Blur", "nameZh": "渐进模糊阅读", "category": "背景", "description": "A scrollable reading surface with gradient backdrop blur at both edges.", "descriptionZh": "文字滚经上下渐进模糊遮罩，阅读区中部保持清晰。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-41/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-41/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-41", "source": "https://skiper-ui.com/v1/skiper41", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper41", "en": "https://skiper-ui.com/v1/skiper41" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-41", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "content": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, reiciendis eum vitae nostrum, temporibus repudiandae voluptatibus, natus iure ipsa velit odit quibusdam illum. Quaerat cumque laudantium libero reprehenderit perferendis quo nulla voluptate? Repellat tenetur labore exercitationem dicta libero voluptate suscipit, iusto ea assumenda. Ipsa enim, quidem atque modi error eaque, debitis perferendis, hic iste libero dignissimos ea! Quod inventore beatae aspernatur nulla rem perferendis aperiam at debitis delectus odit quia animi ex mollitia vero molestias itaque deleniti, quos exercitationem consequatur assumenda dolor? Quod reiciendis in similique reprehenderit commodi quo blanditiis nobis hic ea optio illum placeat officia alias quasi autem earum quos obcaecati, voluptatum corporis quisquam. Quisquam iste, quas explicabo omnis harum aut quam adipisci, voluptatem saepe accusantium doloribus repellendus amet culpa magnam ex et dolores accusamus commodi facere aliquam voluptatum alias? Officia expedita ut vel? Beatae deserunt sequi id eos libero suscipit totam cum, sed architecto atque quisquam et incidunt quod fuga ullam repellat assumenda quos ab, voluptatum sint nesciunt? Ad sapiente est laborum quam sint eius sequi. Eum, veniam dignissimos.", "paragraphs": 10, "fontSize": 16, "lineHeight": 1.5, "blurAmount": 4, "blurHeight": 150, "position": "both", "backgroundColor": "#f5f4f3", "textColor": "#939292", "hint": "Scroll down to see the effect" } } }, { "id": "skiper-43", "name": "Vercel Tooltip", "nameZh": "Vercel 图标提示栏", "category": "导航", "description": "A dark icon toolbar with a shared moving tooltip and keyboard hints.", "descriptionZh": "黑色胶囊图标栏，共享气泡跟随悬停项目并显示快捷键。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-43/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-43/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-43", "source": "https://skiper-ui.com/v1/skiper43", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper43", "en": "https://skiper-ui.com/v1/skiper43" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-43", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "labels": "Comment\nInbox\nFeature Flags\nDraft Mode\nShare\nMenu", "shortcuts": "C\n\n\n\n\n⌘ K", "badgeIndices": "1,5", "iconSize": 20, "gap": 12, "padding": 14, "radius": 30, "tooltipOffset": 8, "backgroundColor": "#000000", "textColor": "#ffffff", "badgeColor": "#00a6f4" } } }, { "id": "skiper-56", "name": "Devouring Details Sign In", "nameZh": "粒子消散输入", "category": "控件", "description": "An underlined input whose text disintegrates into particles when submitted.", "descriptionZh": "极简下划线输入框，提交时文字从右向左化为粒子消散。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/skiper-56/", "en": "https://tuneshape.kai-nex.com/en/effects/skiper-56/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/skiper-56", "source": "https://skiper-ui.com/v1/skiper56", "sourceDocumentation": { "zh": "https://skiper-ui.com/v1/skiper56", "en": "https://skiper-ui.com/v1/skiper56" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "skiper-56", "durationMs": 500, "delayMs": 0, "easing": [ 0.22, 1, 0.36, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "skiper": { "placeholder": "yo@gxuri.me", "defaultValue": "", "fontSize": 60, "inputWidth": 550, "particleSize": 1, "scatter": 26, "backgroundColor": "#f5f4f3", "textColor": "#000000", "placeholderColor": "#808080", "buttonLabel": "→" } } }, { "id": "chapter-progress-nav", "name": "Chapter Progress Navigation", "nameZh": "章节进度导航", "category": "导航", "description": "Equal chapter labels, real scroll progress, and an interruptible direct transition.", "descriptionZh": "等宽章节标签、真实阅读进度和可随时打断的短转场。", "documentation": { "zh": "https://tuneshape.kai-nex.com/effects/chapter-progress-nav/", "en": "https://tuneshape.kai-nex.com/en/effects/chapter-progress-nav/" }, "editor": "https://tuneshape.kai-nex.com/#/effect/chapter-progress-nav", "source": "https://tuneshape.kai-nex.com/effects/chapter-progress-nav/source.mjs", "sourceDocumentation": { "zh": "https://tuneshape.kai-nex.com/effects/chapter-progress-nav/#source-code", "en": "https://tuneshape.kai-nex.com/en/effects/chapter-progress-nav/#source-code" }, "defaultConfig": { "schemaVersion": 2, "recipeId": "chapter-progress-nav", "durationMs": 370, "delayMs": 0, "easing": [ 0, 0, 1, 1 ], "offsetX": 0, "offsetY": 0, "scale": 1, "loop": false, "interruption": "retarget", "tracks": [], "chapterProgressNav": { "sections": [ { "id": "overview", "label": "Overview", "shortLabel": "Start", "title": "A clear beginning.", "body": "Give each chapter a useful name. This reading surface is a working example: scroll to see the line follow your position, or choose a chapter above to jump directly to its content.", "tone": "dark" }, { "id": "process", "label": "Process", "shortLabel": "Build", "title": "Move with intention.", "body": "The whole label row is clickable. The thin line underneath only reports real reading progress. It moves backward when you scroll upward, and never acts as a scrubber.", "tone": "light" }, { "id": "details", "label": "Details", "shortLabel": "Refine", "title": "Keep the reader in control.", "body": "A new destination replaces the previous one. Wheel, touch and scrolling keys interrupt the transition. Keyboard focus arrives with the content; reduced motion moves there immediately.", "tone": "dark" } ], "initialIndex": 0, "theme": "auto", "accentColor": "#2447d8", "fontSize": 14, "mobileFontSize": 13, "fontWeight": 350, "gap": 28, "padding": 32, "rowHeight": 44, "lineWidth": 1, "railGap": 7, "sectionHeight": 480, "readingOffset": 24, "fadeOutMs": 140 } } } ] }