# Design Library

> Live web animation demos for CSS, JavaScript, GSAP, SVG and Canvas, plus a library of website themes for small businesses. Every motion and theme comes with a copy-ready AI prompt in English and Simplified Chinese.

Each motion page has a live demo, its full source code, and an AI prompt that recreates it. The same motions exist in English (/en) and Simplified Chinese (/zh-CN). The full prompts are in /llms-full.txt.

## Design Library (English)

- [Bar Chart Grow](https://design.twlworks.com/en/motion/bar-chart-grow): Bars rise from the baseline one after another as the chart scrolls into view, with each value appearing on top. (CSS · SVG & shapes · Scroll)
- [Before / After Slider](https://design.twlworks.com/en/motion/before-after): Drag the divider across the picture to compare the edited version with the original underneath. (JS · Images · Drag)
- [Inverting Blend Cursor](https://design.twlworks.com/en/motion/blend-cursor): A round cursor inverts whatever it passes over and grows into a lens when it reaches a link. (JS · Cursor · Pointer)
- [Blur-in Letters](https://design.twlworks.com/en/motion/blur-in-letters): A headline comes into focus letter by letter, each one sharpening and rising slightly as it lands. (CSS · Text · Entrance)
- [Circular Progress](https://design.twlworks.com/en/motion/circular-progress): A ring fills to the new value while the number in the middle counts up with it. (JS · SVG & shapes · Click)
- [Image Clip Reveal](https://design.twlworks.com/en/motion/clip-reveal): A coloured panel sweeps across and pulls the picture in behind it, while the picture itself settles from a slight zoom. (CSS · Images · Entrance)
- [Confetti Burst](https://design.twlworks.com/en/motion/confetti-burst): Clicking fires a cone of paper confetti that tumbles, slows with air drag and falls out of view. (Canvas · Backgrounds · Click)
- [Lagging Follower Ring](https://design.twlworks.com/en/motion/cursor-follower): A small dot sticks to the pointer while a larger ring trails behind it, then wraps around buttons you hover. (GSAP · Cursor · Pointer)
- [Ribbon Cursor Trail](https://design.twlworks.com/en/motion/cursor-trail): The pointer leaves a smooth ribbon behind it that thins out and fades within half a second. (Canvas · Cursor · Pointer)
- [Reactive Dot Grid](https://design.twlworks.com/en/motion/dot-grid): A grid of dots swells and pushes away from the pointer, like a field of pins under your hand. (Canvas · Backgrounds · Pointer)
- [Expanding Panels](https://design.twlworks.com/en/motion/expanding-panels): A row of narrow panels where the one you hover or focus widens to show its story while the others make room. (CSS · Layout · Hover)
- [Flip Card](https://design.twlworks.com/en/motion/flip-card): The card turns over in 3D to reveal details on its back, and turns back on the next click. (CSS · Cards · Click)
- [Floating Label Input](https://design.twlworks.com/en/motion/floating-label): The label sits inside the empty field like a placeholder and floats up to the border once you focus or type. (CSS · Forms & controls · Click)
- [Drifting Gradient](https://design.twlworks.com/en/motion/gradient-drift): Three soft colour fields slide past each other behind a headline, so the background feels alive without pulling focus. (CSS · Backgrounds · Loop)
- [Hold to Confirm](https://design.twlworks.com/en/motion/hold-to-confirm): A fill grows across the button while you hold it down; let go early and it drains back, hold to the end and it confirms. (JS · Buttons · Click)
- [Ken Burns Pan](https://design.twlworks.com/en/motion/ken-burns): A still picture slowly zooms and drifts inside its frame, the documentary trick that makes a photo feel like footage. (CSS · Images · Loop)
- [Like Burst](https://design.twlworks.com/en/motion/like-burst): Tapping the heart squashes it, refills it in colour and throws a ring of small sparks outward. (CSS · Buttons · Click)
- [Loading to Success](https://design.twlworks.com/en/motion/loading-button): The label slides away for a spinner while the request runs, then a check mark draws itself when it succeeds. (CSS · Buttons · Click)
- [Infinite Marquee](https://design.twlworks.com/en/motion/marquee): Two rows of tags glide in opposite directions without a seam, and pause while you hover them. (CSS · Layout · Loop)
- [Odometer Digits](https://design.twlworks.com/en/motion/odometer): Each digit is a vertical strip of 0–9 that rolls to its new value, with the digits on the right travelling further. (CSS · Text · Click)
- [Path Draw](https://design.twlworks.com/en/motion/path-draw): A line illustration draws itself stroke by stroke, then a dot travels along the finished route. (CSS · SVG & shapes · Entrance)
- [Range Slider Bubble](https://design.twlworks.com/en/motion/range-bubble): A value bubble rides above the slider thumb, grows while you drag and leans in the direction you are moving. (JS · Forms & controls · Drag)
- [Rotating Words](https://design.twlworks.com/en/motion/rotating-words): One word in a headline slides up and out while the next slides in from below, and the slot resizes to fit it. (CSS · Text · Loop)
- [Shake on Error](https://design.twlworks.com/en/motion/shake-error): Submitting an invalid code makes the field shake side to side and show the error underneath, like a head saying no. (CSS · Forms & controls · Click)
- [Shine Sweep Button](https://design.twlworks.com/en/motion/shine-sweep): A narrow band of light glides across the button once when you hover or focus it. (CSS · Buttons · Hover)
- [Spotlight Card](https://design.twlworks.com/en/motion/spotlight-card): A soft glow follows the pointer inside the card and lights up the border right where the pointer is. (CSS · Cards · Pointer)
- [Sticky Stacking Cards](https://design.twlworks.com/en/motion/sticky-stack): As you scroll, each card sticks a little lower than the one before and the earlier cards shrink back into a neat pile. (CSS · Layout · Scroll)
- [Swipe Card Stack](https://design.twlworks.com/en/motion/swipe-stack): Drag the top card sideways and it tilts with your hand; throw it far enough and it flies off while the next card steps forward. (GSAP · Cards · Drag)
- [Stretchy Toggle](https://design.twlworks.com/en/motion/toggle-switch): The knob stretches into a pill as it travels, then settles round on the other side while the track fills with colour. (CSS · Forms & controls · Toggle)
- [Typewriter](https://design.twlworks.com/en/motion/typewriter): Phrases type out one character at a time behind a blinking caret, pause, erase and move on to the next. (JS · Text · Loop)
- [Wave Letters](https://design.twlworks.com/en/motion/wave-letters): Letters hop one after another so a soft wave keeps rolling through the word. (CSS · Text · Loop)
- [Smooth Accordion](https://design.twlworks.com/en/motion/accordion): Panels open to their natural height and close again with no fixed max-height, while the chevron turns to match. (CSS · Layout · Toggle)
- [Animated Checkbox](https://design.twlworks.com/en/motion/animated-checkbox): Ticking a to-do fills the box with a squish, draws the check mark, and strikes the task through from left to right. (CSS · Forms & controls · Toggle)
- [Audio Bars](https://design.twlworks.com/en/motion/audio-bars): A row of equaliser bars bounces at uneven rhythms to show that something is playing, and freezes when paused. (CSS · SVG & shapes · Loop)
- [Bokeh Lights](https://design.twlworks.com/en/motion/bokeh): Soft out-of-focus orbs of light drift and pulse behind the content, like city lights seen through a lens. (CSS · Backgrounds · Loop)
- [Bottom Sheet](https://design.twlworks.com/en/motion/bottom-sheet): A sheet rises from the bottom edge over a dimmed screen, the way mobile apps present quick choices. (CSS · Layout · Toggle)
- [Command Palette](https://design.twlworks.com/en/motion/command-palette): A search palette pops in with a quick scale, filters as you type, and a highlight glides between results under the arrow keys. (JS · Layout · Toggle)
- [Copy Feedback](https://design.twlworks.com/en/motion/copy-feedback): The copy icon pops into a check mark and the label confirms, then both settle back, so you know the clipboard worked. (CSS · Buttons · Click)
- [Count Up](https://design.twlworks.com/en/motion/count-up): A key number climbs from zero to its value as it scrolls into view, then eases to a stop so the final figure lands with weight. (GSAP · Text · Entrance)
- [Crosshair Cursor](https://design.twlworks.com/en/motion/crosshair-cursor): Two hairlines span the whole area and meet at the pointer, with a live coordinate readout, like a design tool ruler. (JS · Cursor · Pointer)
- [Curtain Page Transition](https://design.twlworks.com/en/motion/curtain-transition): Two coloured panels sweep across to cover the page, the content swaps behind them, and they sweep away to reveal the new page. (GSAP · Layout · Click)
- [Dock Magnify](https://design.twlworks.com/en/motion/dock-magnify): Icons in a dock swell as the pointer nears them and shrink as it moves away, pushing neighbours aside like a desktop dock. (JS · Layout · Pointer)
- [Expanding Search](https://design.twlworks.com/en/motion/expanding-search): A round search icon stretches into a full field when tapped and folds back when you leave it empty. (CSS · Forms & controls · Click)
- [Filterable Grid](https://design.twlworks.com/en/motion/filter-grid): Choosing a filter makes hidden items shrink away and the rest glide into their new places instead of jumping. (GSAP · Layout · Click)
- [Focus Dim Siblings](https://design.twlworks.com/en/motion/focus-dim): Hovering one card lifts it slightly while the others fade and soften, so attention lands on a single choice. (CSS · Cards · Hover)
- [Following Eyes](https://design.twlworks.com/en/motion/following-eyes): A pair of eyes tracks the pointer anywhere on the page and blinks now and then, adding a little personality. (JS · Cursor · Pointer)
- [Glitch Text](https://design.twlworks.com/en/motion/glitch-text): On hover the word tears into offset slices of colour for a moment, like a signal breaking up, then snaps back clean. (CSS · Text · Hover)
- [Rotating Gradient Border](https://design.twlworks.com/en/motion/gradient-border): A bright arc travels around the edge of the button, drawing attention to it without moving the button itself. (CSS · Buttons · Loop)
- [Flowing Gradient Text](https://design.twlworks.com/en/motion/gradient-text): A warm gradient runs slowly through the letters of a headline, so it keeps a little life without moving at all. (CSS · Text · Loop)
- [Hamburger to Close](https://design.twlworks.com/en/motion/hamburger-morph): The three menu lines fold into an X: the outer lines meet in the middle, then rotate, while the centre line slips away. (CSS · Buttons · Toggle)
- [Hide Header on Scroll](https://design.twlworks.com/en/motion/hide-header): The header slides away while you scroll down to read and slides back the moment you scroll up to look for it. (JS · Layout · Scroll)
- [Highlighter Mark](https://design.twlworks.com/en/motion/highlighter-mark): A marker stroke sweeps behind the key phrase as the sentence comes into view, pointing the eye at what matters. (CSS · Text · Entrance)
- [Holographic Card](https://design.twlworks.com/en/motion/holographic-card): A foil sheen of shifting colour follows the pointer across the card, like tilting a collectible under a lamp. (CSS · Cards · Pointer)
- [Horizontal Scroll Section](https://design.twlworks.com/en/motion/horizontal-scroll): Scrolling down pins the section and slides a row of panels sideways, then lets the page continue once the row ends. (JS · Layout · Scroll)
- [Hover Zoom & Pan](https://design.twlworks.com/en/motion/hover-zoom-pan): Hovering zooms the image in, and moving the pointer pans across it, so shoppers can inspect detail without opening a viewer. (CSS · Images · Pointer)
- [Jelly Button](https://design.twlworks.com/en/motion/jelly-button): On hover the button squashes and stretches like a jelly being poked, wobbling a few times before it settles. (CSS · Buttons · Hover)
- [Magnetic Button](https://design.twlworks.com/en/motion/magnetic-button): The button leans toward the cursor and its label drifts a little further, then settles back when the pointer leaves. (GSAP · Buttons · Pointer)
- [Magnifier Lens](https://design.twlworks.com/en/motion/magnifier-lens): A round lens follows the pointer and shows the detail underneath at twice the size, for reading fine print or inspecting a map. (JS · Cursor · Pointer)
- [Glyph Rain](https://design.twlworks.com/en/motion/matrix-rain): Columns of characters stream down the screen at different speeds, each leaving a fading tail behind its bright head. (Canvas · Backgrounds · Loop)
- [Modal Dialog](https://design.twlworks.com/en/motion/modal-dialog): The dialog rises and scales in over a fading backdrop, and leaves the same way, all on the native dialog element. (CSS · Layout · Toggle)
- [Neon Flicker](https://design.twlworks.com/en/motion/neon-flicker): A glowing sign that stutters on, holds, and drops out for a beat now and then, like a tube that is slightly worn. (CSS · Text · Loop)
- [Number Stepper](https://design.twlworks.com/en/motion/number-stepper): The number slides up when you add and down when you subtract, so the direction of the change is felt as well as read. (CSS · Forms & controls · Click)
- [Outline Text Fill](https://design.twlworks.com/en/motion/outline-fill): Hollow outlined letters fill with colour from the bottom up when you hover, like liquid rising inside the type. (CSS · Text · Hover)
- [Parallax Layers](https://design.twlworks.com/en/motion/parallax-layers): Hills, sun and title move at different speeds as you scroll, so a flat scene gains depth. (JS · Backgrounds · Scroll)
- [Constellation Field](https://design.twlworks.com/en/motion/particle-field): Points drift slowly across a canvas and draw thin lines to each other when the pointer passes near them. (Canvas · Backgrounds · Pointer)
- [3D Press](https://design.twlworks.com/en/motion/press-3d): The button sits on a solid edge and sinks into it when pressed, like a physical key that bottoms out. (CSS · Buttons · Click)
- [Pulse Rings](https://design.twlworks.com/en/motion/pulse-rings): Rings ripple out from a live indicator at an even pace, like a signal broadcasting from the centre. (CSS · Backgrounds · Loop)
- [Radar Sweep](https://design.twlworks.com/en/motion/radar-sweep): A beam sweeps round a radar dish and each blip flashes the moment the beam passes over it, then fades. (CSS · SVG & shapes · Loop)
- [Retro Grid Horizon](https://design.twlworks.com/en/motion/retro-grid): A glowing grid floor rolls endlessly toward you under a horizon, giving a hero section a sense of forward travel. (CSS · Backgrounds · Loop)
- [Ripple Press](https://design.twlworks.com/en/motion/ripple-press): A soft circle grows from the exact point you press and fades out, so the button answers where it was touched. (CSS · Buttons · Click)
- [Rolling Text Button](https://design.twlworks.com/en/motion/rolling-text): On hover each letter of the label rolls up and is replaced by a copy from below, in a quick wave from left to right. (CSS · Buttons · Hover)
- [Scroll Draw Path](https://design.twlworks.com/en/motion/scroll-draw): A route line draws itself as you scroll and rewinds when you scroll back, tying progress to the reader’s hand. (JS · SVG & shapes · Scroll)
- [Reading Progress](https://design.twlworks.com/en/motion/scroll-progress): A thin bar across the top fills as you read down the article, so readers always know how much is left. (JS · Layout · Scroll)
- [Scroll Text Reveal](https://design.twlworks.com/en/motion/scroll-text-reveal): Words light up one after another as you scroll, so a statement is read at the pace the reader moves. (GSAP · Text · Scroll)
- [Scroll Zoom to Full](https://design.twlworks.com/en/motion/scroll-zoom): A framed image opens out to fill the width as it scrolls into the middle of the screen, turning a thumbnail into a scene. (CSS · Images · Scroll)
- [Send Plane Button](https://design.twlworks.com/en/motion/send-button): Clicking Send launches the paper plane off the button, the label slides over to Sent with a check, then everything resets. (CSS · Buttons · Click)
- [Push Side Drawer](https://design.twlworks.com/en/motion/side-drawer): The navigation drawer slides in from the left and pushes the page aside, which shrinks and dims a little to show it is in the background. (CSS · Layout · Toggle)
- [Skeleton Shimmer](https://design.twlworks.com/en/motion/skeleton-shimmer): Grey placeholder shapes hold the layout while a soft band of light sweeps across them, then the real content crossfades in. (CSS · Cards · Loop)
- [Slide to Confirm](https://design.twlworks.com/en/motion/slide-to-confirm): Drag the knob across the track to commit; let go early and it springs back, so a stray tap never confirms anything. (JS · Buttons · Drag)
- [Sliding Tab Indicator](https://design.twlworks.com/en/motion/sliding-tabs): A single highlight slides and resizes between tabs instead of each tab lighting up on its own. (CSS · Forms & controls · Click)
- [Focus Carousel](https://design.twlworks.com/en/motion/snap-carousel): Swipe through a row of cards that snap to the centre, where the focused card grows to full size and the rest recede. (CSS · Cards · Drag)
- [Split Flap](https://design.twlworks.com/en/motion/split-flap): Each tile of a departure board flips over in turn to the next word, with a short stagger so the change ripples across. (JS · Text · Loop)
- [Masked Line Rise](https://design.twlworks.com/en/motion/split-rise): Each line of a headline slides up from behind an invisible edge, one after another, like type set into place. (GSAP · Text · Entrance)
- [Stack Fan Out](https://design.twlworks.com/en/motion/stack-fan): A tidy stack of cards fans out like a hand of playing cards on hover, showing what is underneath at a glance. (CSS · Cards · Hover)
- [Staggered Card Reveal](https://design.twlworks.com/en/motion/stagger-reveal): Cards rise into place one after another when the group scrolls into view, so a grid arrives as a sequence instead of a block. (GSAP · Cards · Scroll)
- [Star Rating](https://design.twlworks.com/en/motion/star-rating): Stars fill up to the one you hover, and the one you pick pops with a small bounce, all on native radio buttons. (CSS · Forms & controls · Hover)
- [Step Progress](https://design.twlworks.com/en/motion/step-progress): The connecting line fills toward the next step and each completed dot pops into a check, so progress through a flow is obvious. (CSS · Layout · Click)
- [Success Check](https://design.twlworks.com/en/motion/success-check): A ring draws itself closed, the check mark strokes in, and the badge gives one small pop to say the job is done. (CSS · SVG & shapes · Entrance)
- [Text Scramble](https://design.twlworks.com/en/motion/text-scramble): On hover, each character flickers through random glyphs and locks into place from left to right, like a display decoding. (JS · Text · Hover)
- [Tilt Card with Glare](https://design.twlworks.com/en/motion/tilt-card): The card tips in 3D toward the pointer while a light spot slides across its surface like a reflection. (CSS · Cards · Pointer)
- [Toast Stack](https://design.twlworks.com/en/motion/toast-stack): New notifications slide up from the bottom and push older ones back into a neat, shrinking pile that clears itself. (CSS · Cards · Click)
- [Tooltip Pop](https://design.twlworks.com/en/motion/tooltip-pop): Tooltips pop up above icon buttons with a slight springy overshoot after a short pause, so they help without getting in the way. (CSS · Buttons · Hover)
- [Top Loading Bar](https://design.twlworks.com/en/motion/top-loading-bar): A slim bar creeps across the top while a page loads, slowing as it goes, then races to the end and fades once it is done. (JS · Layout · Click)
- [Sliding Underline](https://design.twlworks.com/en/motion/underline-slide): The underline draws in from the left when you hover a link and leaves through the right, so it reads as passing through. (CSS · Text · Hover)
- [Wavy Lines](https://design.twlworks.com/en/motion/wavy-lines): Fine horizontal lines ripple slowly like a calm sea, and swell into a bump wherever the pointer passes over them. (Canvas · Backgrounds · Pointer)

## Design Library (简体中文)

- [柱状图生长](https://design.twlworks.com/zh-CN/motion/bar-chart-grow): 图表滚动进入视野时，柱子从基线依次升起，数值显示在柱顶。 (CSS · SVG 与图形 · 滚动)
- [前后对比滑块](https://design.twlworks.com/zh-CN/motion/before-after): 在图片上拖动分隔线，对比修改后的版本和下面的原图。 (JS · 图片 · 拖拽)
- [反色混合光标](https://design.twlworks.com/zh-CN/motion/blend-cursor): 圆形光标会反转经过的内容颜色，移到链接上时放大成一面透镜。 (JS · 光标 · 跟随指针)
- [模糊入场文字](https://design.twlworks.com/zh-CN/motion/blur-in-letters): 标题逐字从模糊变得清晰，每个字落定时微微上升。 (CSS · 文字 · 进场)
- [环形进度](https://design.twlworks.com/zh-CN/motion/circular-progress): 圆环填充到新的数值，中间的数字同步向上计数。 (JS · SVG 与图形 · 点击)
- [图片裁切揭示](https://design.twlworks.com/zh-CN/motion/clip-reveal): 一块彩色面板扫过，把图片拉进画面，图片本身则从轻微放大的状态慢慢回落。 (CSS · 图片 · 进场)
- [彩纸爆发](https://design.twlworks.com/zh-CN/motion/confetti-burst): 点击后喷出一束彩纸，彩纸翻滚着因空气阻力减速，然后落出画面。 (Canvas · 背景 · 点击)
- [延迟跟随光圈](https://design.twlworks.com/zh-CN/motion/cursor-follower): 小圆点紧贴指针，一个较大的光圈在后面跟随，悬停到按钮上时会包住按钮。 (GSAP · 光标 · 跟随指针)
- [丝带光标拖尾](https://design.twlworks.com/zh-CN/motion/cursor-trail): 指针身后留下一条平滑的丝带，在半秒内逐渐变细、消失。 (Canvas · 光标 · 跟随指针)
- [响应式点阵](https://design.twlworks.com/zh-CN/motion/dot-grid): 点阵会在指针附近膨胀并被推开，像手掌下的一片针。 (Canvas · 背景 · 跟随指针)
- [展开式面板](https://design.twlworks.com/zh-CN/motion/expanding-panels): 一排窄面板中，被悬停或聚焦的那块会变宽并展示内容，其余面板让出空间。 (CSS · 布局 · 悬停)
- [翻转卡片](https://design.twlworks.com/zh-CN/motion/flip-card): 卡片以 3D 方式翻转，露出背面的详细信息；再次点击翻回正面。 (CSS · 卡片 · 点击)
- [浮动标签输入框](https://design.twlworks.com/zh-CN/motion/floating-label): 标签在空输入框里像占位文字一样，聚焦或输入后会浮到边框上。 (CSS · 表单与控件 · 点击)
- [流动渐变](https://design.twlworks.com/zh-CN/motion/gradient-drift): 三团柔和的色块在标题后方彼此滑过，让背景有生气又不会抢走注意力。 (CSS · 背景 · 循环)
- [长按确认](https://design.twlworks.com/zh-CN/motion/hold-to-confirm): 按住按钮时，填充色会逐渐铺满；中途松开会退回，按住到底才会确认。 (JS · 按钮 · 点击)
- [肯·伯恩斯平移](https://design.twlworks.com/zh-CN/motion/ken-burns): 静态图片在画框中缓慢放大并漂移，这是让照片像影片一样流动的纪录片手法。 (CSS · 图片 · 循环)
- [点赞爆发](https://design.twlworks.com/zh-CN/motion/like-burst): 点击爱心时，它会先压扁再弹回并填满颜色，同时向外迸出一圈小火花。 (CSS · 按钮 · 点击)
- [加载到成功](https://design.twlworks.com/zh-CN/motion/loading-button): 请求进行时文字滑走、换成加载圈；成功后对勾会自己画出来。 (CSS · 按钮 · 点击)
- [无限跑马灯](https://design.twlworks.com/zh-CN/motion/marquee): 两排标签朝相反方向无缝滑动，悬停时暂停。 (CSS · 布局 · 循环)
- [里程表数字](https://design.twlworks.com/zh-CN/motion/odometer): 每一位数字都是一条 0–9 的竖向数字带，滚动到新的数值，右侧的数字滚得更远。 (CSS · 文字 · 点击)
- [路径描绘](https://design.twlworks.com/zh-CN/motion/path-draw): 线条插画一笔一笔地画出来，画完后一个小圆点沿着路线移动。 (CSS · SVG 与图形 · 进场)
- [滑块气泡](https://design.twlworks.com/zh-CN/motion/range-bubble): 数值气泡跟随滑块圆钮移动，拖动时放大并朝移动方向倾斜。 (JS · 表单与控件 · 拖拽)
- [轮播词](https://design.twlworks.com/zh-CN/motion/rotating-words): 标题里的一个词向上滑出，下一个词从下方滑入，词槽宽度随之调整。 (CSS · 文字 · 循环)
- [错误抖动](https://design.twlworks.com/zh-CN/motion/shake-error): 提交无效的代码时，输入框会左右抖动并在下方显示错误，像在摇头说不。 (CSS · 表单与控件 · 点击)
- [扫光按钮](https://design.twlworks.com/zh-CN/motion/shine-sweep): 悬停或聚焦时，一道窄窄的光带从按钮上滑过一次。 (CSS · 按钮 · 悬停)
- [聚光卡片](https://design.twlworks.com/zh-CN/motion/spotlight-card): 一团柔光跟着指针在卡片内移动，并点亮指针所在位置的边框。 (CSS · 卡片 · 跟随指针)
- [粘性堆叠卡片](https://design.twlworks.com/zh-CN/motion/sticky-stack): 滚动时，每张卡片都停在比上一张略低的位置，前面的卡片缩小，整齐地叠成一摞。 (CSS · 布局 · 滚动)
- [滑动卡片堆](https://design.twlworks.com/zh-CN/motion/swipe-stack): 把最上面的卡片向两侧拖动，它会随手势倾斜；甩得够远就会飞出，下一张卡片随即上前。 (GSAP · 卡片 · 拖拽)
- [弹性开关](https://design.twlworks.com/zh-CN/motion/toggle-switch): 开关圆钮在移动时会拉长成胶囊形，到另一侧后恢复圆形，轨道同时填满颜色。 (CSS · 表单与控件 · 切换)
- [打字机](https://design.twlworks.com/zh-CN/motion/typewriter): 一句句文字在闪烁的光标后逐字打出，停顿后删除，再继续下一句。 (JS · 文字 · 循环)
- [波浪文字](https://design.twlworks.com/zh-CN/motion/wave-letters): 文字一个接一个地跳起，让一道柔和的波浪不断穿过整句话。 (CSS · 文字 · 循环)
- [平滑手风琴](https://design.twlworks.com/zh-CN/motion/accordion): 面板展开到内容的自然高度后又能收回，无需固定 max-height，箭头也随之转动。 (CSS · 布局 · 切换)
- [动态复选框](https://design.twlworks.com/zh-CN/motion/animated-checkbox): 勾选待办时方框带着挤压感填满，画出对勾，任务文字也从左到右被划掉。 (CSS · 表单与控件 · 切换)
- [音频跳动条](https://design.twlworks.com/zh-CN/motion/audio-bars): 一排均衡器条以不规则的节奏跳动，表示正在播放，暂停时随之定住。 (CSS · SVG 与图形 · 循环)
- [散景光斑](https://design.twlworks.com/zh-CN/motion/bokeh): 柔和的失焦光斑在内容后面飘动、呼吸，像透过镜头看到的城市灯光。 (CSS · 背景 · 循环)
- [底部弹出面板](https://design.twlworks.com/zh-CN/motion/bottom-sheet): 面板从底部边缘升起，盖在变暗的屏幕上，就像手机 App 呈现快捷选项的方式。 (CSS · 布局 · 切换)
- [命令面板](https://design.twlworks.com/zh-CN/motion/command-palette): 搜索面板以快速缩放弹出，输入即筛选，用方向键切换时高亮块在结果之间滑动。 (JS · 布局 · 切换)
- [复制反馈](https://design.twlworks.com/zh-CN/motion/copy-feedback): 复制图标弹成一个对勾，文字随之确认，然后两者恢复原样，让你知道剪贴板已经生效。 (CSS · 按钮 · 点击)
- [数字递增](https://design.twlworks.com/zh-CN/motion/count-up): 关键数字进入视野时从零开始增长，最后缓缓停下，让最终的数值落得有分量。 (GSAP · 文字 · 进场)
- [十字准星光标](https://design.twlworks.com/zh-CN/motion/crosshair-cursor): 两条细线横跨整个区域并在指针处交汇，同时实时显示坐标，像设计工具里的标尺。 (JS · 光标 · 跟随指针)
- [幕布转场](https://design.twlworks.com/zh-CN/motion/curtain-transition): 两块彩色面板扫过来盖住页面，内容在后面切换，然后面板扫开露出新页面。 (GSAP · 布局 · 点击)
- [程序坞放大](https://design.twlworks.com/zh-CN/motion/dock-magnify): 指针靠近时程序坞里的图标逐渐变大，离开时又缩回去，像桌面程序坞一样把相邻图标推开。 (JS · 布局 · 跟随指针)
- [展开搜索框](https://design.twlworks.com/zh-CN/motion/expanding-search): 圆形的搜索图标点击后伸展成完整的输入框，内容为空时离开又会收回去。 (CSS · 表单与控件 · 点击)
- [可筛选网格](https://design.twlworks.com/zh-CN/motion/filter-grid): 选择筛选条件后，被隐藏的项目缩小消失，其余项目平滑滑到新位置，而不是生硬地跳过去。 (GSAP · 布局 · 点击)
- [聚焦淡化其他卡片](https://design.twlworks.com/zh-CN/motion/focus-dim): 悬停在一张卡片上时它会微微抬起，其他卡片变淡变柔，让注意力落在一个选项上。 (CSS · 卡片 · 悬停)
- [跟随的眼睛](https://design.twlworks.com/zh-CN/motion/following-eyes): 一双眼睛在页面任何地方都会跟着指针转动，时不时眨一下，增添一点个性。 (JS · 光标 · 跟随指针)
- [故障文字](https://design.twlworks.com/zh-CN/motion/glitch-text): 悬停时文字瞬间撕裂成错位的彩色切片，像信号中断一样，随后又干净地复原。 (CSS · 文字 · 悬停)
- [旋转渐变边框](https://design.twlworks.com/zh-CN/motion/gradient-border): 一段亮色弧线沿着按钮边缘绕圈，在按钮本身不动的情况下吸引注意。 (CSS · 按钮 · 循环)
- [流动渐变文字](https://design.twlworks.com/zh-CN/motion/gradient-text): 一道暖色渐变缓缓流过标题文字，让标题在不移动的情况下保持一点生气。 (CSS · 文字 · 循环)
- [汉堡菜单变关闭](https://design.twlworks.com/zh-CN/motion/hamburger-morph): 三条菜单线折成一个 X：上下两条先在中间汇合再旋转，中间那条悄悄消失。 (CSS · 按钮 · 切换)
- [滚动隐藏顶栏](https://design.twlworks.com/zh-CN/motion/hide-header): 向下滚动阅读时顶栏滑走，一往上滚想找它，它就立刻滑回来。 (JS · 布局 · 滚动)
- [荧光笔标记](https://design.twlworks.com/zh-CN/motion/highlighter-mark): 句子进入视野时，一道荧光笔从关键词后方划过，把视线引到重点上。 (CSS · 文字 · 进场)
- [镭射卡片](https://design.twlworks.com/zh-CN/motion/holographic-card): 一层变幻色彩的镭射光泽跟着指针在卡面上流动，像在灯下转动一张收藏卡。 (CSS · 卡片 · 跟随指针)
- [横向滚动区块](https://design.twlworks.com/zh-CN/motion/horizontal-scroll): 向下滚动时区块被固定，一排面板横向滑过，滑到尽头后页面才继续往下。 (JS · 布局 · 滚动)
- [悬停放大平移](https://design.twlworks.com/zh-CN/motion/hover-zoom-pan): 悬停时图片放大，移动指针就能在图上平移，不用打开查看器也能看清细节。 (CSS · 图片 · 跟随指针)
- [果冻按钮](https://design.twlworks.com/zh-CN/motion/jelly-button): 悬停时按钮像被戳了一下的果冻，挤压、拉伸，晃几下再停稳。 (CSS · 按钮 · 悬停)
- [磁吸按钮](https://design.twlworks.com/zh-CN/motion/magnetic-button): 按钮会向指针方向倾斜，文字移动得更多一些；指针离开后再平稳回位。 (GSAP · 按钮 · 跟随指针)
- [放大镜](https://design.twlworks.com/zh-CN/motion/magnifier-lens): 一个圆形镜片跟随指针，把下方的细节放大两倍，方便阅读小字或查看地图。 (JS · 光标 · 跟随指针)
- [字符雨](https://design.twlworks.com/zh-CN/motion/matrix-rain): 一列列字符以不同速度从屏幕上方流下，每一列明亮的头部后面拖着逐渐消失的尾巴。 (Canvas · 背景 · 循环)
- [模态对话框](https://design.twlworks.com/zh-CN/motion/modal-dialog): 对话框在逐渐变暗的背景上浮起放大，离开时原路返回，全部基于原生 dialog 元素。 (CSS · 布局 · 切换)
- [霓虹闪烁](https://design.twlworks.com/zh-CN/motion/neon-flicker): 像一根有点老化的灯管：亮起时会抖几下，平时稳定发光，偶尔又暗掉一拍。 (CSS · 文字 · 循环)
- [数字步进器](https://design.twlworks.com/zh-CN/motion/number-stepper): 加一时数字向上滑入，减一时向下滑入，让变化的方向既能看到也能感受到。 (CSS · 表单与控件 · 点击)
- [描边文字填充](https://design.twlworks.com/zh-CN/motion/outline-fill): 悬停时镂空的描边文字从下往上被填满颜色，像液体在字里慢慢上升。 (CSS · 文字 · 悬停)
- [视差分层](https://design.twlworks.com/zh-CN/motion/parallax-layers): 滚动时山丘、太阳和标题以不同速度移动，让一幅平面画面产生纵深。 (JS · 背景 · 滚动)
- [星座粒子场](https://design.twlworks.com/zh-CN/motion/particle-field): 粒子在画布上缓慢漂移，当指针经过附近时，粒子之间会连出细线。 (Canvas · 背景 · 跟随指针)
- [立体按压](https://design.twlworks.com/zh-CN/motion/press-3d): 按钮立在一块实心底座上，按下时整块沉下去，像一颗按到底的实体按键。 (CSS · 按钮 · 点击)
- [脉冲光环](https://design.twlworks.com/zh-CN/motion/pulse-rings): 光环以均匀的节奏从直播标识向外扩散，像信号从中心向外广播。 (CSS · 背景 · 循环)
- [雷达扫描](https://design.twlworks.com/zh-CN/motion/radar-sweep): 一道光束绕着雷达盘扫过，每个目标点在光束经过的瞬间亮起，然后慢慢消失。 (CSS · SVG 与图形 · 循环)
- [复古网格地平线](https://design.twlworks.com/zh-CN/motion/retro-grid): 发光的网格地面在地平线下源源不断地朝你滚来，给首屏一种向前行进的感觉。 (CSS · 背景 · 循环)
- [涟漪按压](https://design.twlworks.com/zh-CN/motion/ripple-press): 从按下的位置扩散出一圈柔和的圆形并逐渐消失，让按钮在被点击的地方给出回应。 (CSS · 按钮 · 点击)
- [滚动文字按钮](https://design.twlworks.com/zh-CN/motion/rolling-text): 悬停时按钮文字逐字向上滚走，被下方的副本替换，从左到右形成一道快速的波浪。 (CSS · 按钮 · 悬停)
- [滚动绘制路径](https://design.twlworks.com/zh-CN/motion/scroll-draw): 路线随着滚动一点点画出来，往回滚又会倒退，把进度交到读者手里。 (JS · SVG 与图形 · 滚动)
- [阅读进度条](https://design.twlworks.com/zh-CN/motion/scroll-progress): 顶部的细条随着你往下读不断填满，让读者随时知道还剩多少。 (JS · 布局 · 滚动)
- [滚动文字显现](https://design.twlworks.com/zh-CN/motion/scroll-text-reveal): 随着滚动，文字一个接一个亮起来，让读者按照自己滚动的节奏读完一句话。 (GSAP · 文字 · 滚动)
- [滚动放大至全幅](https://design.twlworks.com/zh-CN/motion/scroll-zoom): 带框的图片滚到屏幕中间时向两侧展开铺满宽度，把一张缩略图变成一整幅场景。 (CSS · 图片 · 滚动)
- [纸飞机发送按钮](https://design.twlworks.com/zh-CN/motion/send-button): 点击发送后，纸飞机从按钮上飞走，文字滑成带对勾的“已发送”，随后一切复位。 (CSS · 按钮 · 点击)
- [推挤式侧边栏](https://design.twlworks.com/zh-CN/motion/side-drawer): 导航侧边栏从左侧滑入，把页面推到一旁，页面略微缩小变暗，表明它退到了后面。 (CSS · 布局 · 切换)
- [骨架屏微光](https://design.twlworks.com/zh-CN/motion/skeleton-shimmer): 灰色占位形状先撑住布局，一道柔光从上面扫过；数据到达后，真实内容以淡入方式替换。 (CSS · 卡片 · 循环)
- [滑动确认](https://design.twlworks.com/zh-CN/motion/slide-to-confirm): 把滑块拖过轨道才算确认；中途松手会弹回原位，误触永远不会触发操作。 (JS · 按钮 · 拖拽)
- [滑动标签指示器](https://design.twlworks.com/zh-CN/motion/sliding-tabs): 一块高亮在标签之间滑动并改变宽度，而不是每个标签各自亮起。 (CSS · 表单与控件 · 点击)
- [居中聚焦轮播](https://design.twlworks.com/zh-CN/motion/snap-carousel): 左右滑动一排会吸附到中心的卡片，位于中间的卡片放大到完整尺寸，其余的向后退。 (CSS · 卡片 · 拖拽)
- [翻牌显示](https://design.twlworks.com/zh-CN/motion/split-flap): 像机场的出发信息牌，每一块翻牌依次翻到下一个词，带一点错开，让变化像波浪一样掠过。 (JS · 文字 · 循环)
- [遮罩逐行升起](https://design.twlworks.com/zh-CN/motion/split-rise): 标题的每一行依次从一条看不见的边缘后面升起，像排好的字一行行落位。 (GSAP · 文字 · 进场)
- [卡片扇形展开](https://design.twlworks.com/zh-CN/motion/stack-fan): 一叠整齐的卡片在悬停时像手里的扑克牌一样扇形展开，一眼就能看到下面有什么。 (CSS · 卡片 · 悬停)
- [卡片依次出现](https://design.twlworks.com/zh-CN/motion/stagger-reveal): 卡片组滚动进入视野时，卡片一张接一张地升起就位，让网格以顺序出现而不是整块弹出。 (GSAP · 卡片 · 滚动)
- [星级评分](https://design.twlworks.com/zh-CN/motion/star-rating): 星星会填充到你悬停的那一颗，选中的那颗轻轻弹一下，全部基于原生单选按钮。 (CSS · 表单与控件 · 悬停)
- [步骤进度](https://design.twlworks.com/zh-CN/motion/step-progress): 连接线朝下一步填充，完成的圆点会弹成一个对勾，让流程走到哪一步一目了然。 (CSS · 布局 · 点击)
- [成功对勾](https://design.twlworks.com/zh-CN/motion/success-check): 圆环自己画合，对勾随之描出，徽章再轻轻弹一下，告诉你事情办妥了。 (CSS · SVG 与图形 · 进场)
- [文字解码](https://design.twlworks.com/zh-CN/motion/text-scramble): 悬停时，每个字会快速闪过随机字符，再从左到右依次定格，像屏幕在解码。 (JS · 文字 · 悬停)
- [光泽倾斜卡片](https://design.twlworks.com/zh-CN/motion/tilt-card): 卡片会朝指针方向做 3D 倾斜，同时一块光斑在表面滑动，像真实的反光。 (CSS · 卡片 · 跟随指针)
- [堆叠通知](https://design.twlworks.com/zh-CN/motion/toast-stack): 新通知从底部滑入，把旧通知推到后面，叠成一摞逐渐缩小、会自动清空的卡片。 (CSS · 卡片 · 点击)
- [弹出提示](https://design.twlworks.com/zh-CN/motion/tooltip-pop): 短暂停顿后，提示气泡带着一点弹性从图标按钮上方弹出，帮得上忙又不碍事。 (CSS · 按钮 · 悬停)
- [顶部加载条](https://design.twlworks.com/zh-CN/motion/top-loading-bar): 页面加载时一条细条在顶部慢慢爬行，越走越慢，加载完成后冲到尽头再淡出。 (JS · 布局 · 点击)
- [滑动下划线](https://design.twlworks.com/zh-CN/motion/underline-slide): 悬停链接时下划线从左侧画入，移开时从右侧离开，像一条线从文字下方穿过。 (CSS · 文字 · 悬停)
- [波浪线条](https://design.twlworks.com/zh-CN/motion/wavy-lines): 细细的水平线条像平静的海面一样缓缓起伏，指针经过的地方会鼓起一道波峰。 (Canvas · 背景 · 跟随指针)

## Optional

- [Full prompts](https://design.twlworks.com/llms-full.txt): every motion with its complete AI prompt in both languages