diff --git a/examples/demo-animations.ts b/examples/demo-animations.ts
new file mode 100644
index 00000000..92bfb6cf
--- /dev/null
+++ b/examples/demo-animations.ts
@@ -0,0 +1,61 @@
+import { App, Screen } from '@termuijs/core';
+import { Box, Text, Checkbox } from '@termuijs/widgets';
+import { Switch } from '@termuijs/ui';
+
+async function main() {
+    const root = new Box({ flexDirection: 'column', gap: 1, padding: { left: 2 } });
+
+    root.addChild(new Text(' Checkbox & Switch Animation Demo', {
+        bold: true, fg: { type: 'named', name: 'cyan' }, height: 1,
+    }));
+    root.addChild(new Text(' Press Space/Enter to toggle  •  q to quit', {
+        fg: { type: 'named', name: 'brightBlack' }, height: 1,
+    }));
+    root.addChild(new Text('─'.repeat(40), { fg: { type: 'named', name: 'brightBlack' }, height: 1 }));
+
+    const cb1 = new Checkbox('Enable notifications', {}, { checked: true });
+    const cb2 = new Checkbox('Dark mode', {}, { checked: false });
+    const cb3 = new Checkbox('Auto-save', {}, { checked: true });
+
+    const sw1 = new Switch({ defaultValue: true, label: 'Wi-Fi' });
+    const sw2 = new Switch({ defaultValue: false, label: 'Bluetooth' });
+    const sw3 = new Switch({ defaultValue: true, label: 'Airplane mode' });
+
+    root.addChild(new Text(' Checkboxes:', { bold: true, height: 1 }));
+    root.addChild(cb1);
+    root.addChild(cb2);
+    root.addChild(cb3);
+
+    root.addChild(new Text('', { height: 1 }));
+
+    root.addChild(new Text(' Switches:', { bold: true, height: 1 }));
+    root.addChild(sw1);
+    root.addChild(sw2);
+    root.addChild(sw3);
+
+    const app = new App(root, { fullscreen: true, fps: 30, title: 'Animation Demo' });
+
+    app.events.on('key', (event) => {
+        if (event.key === 'q' || (event.ctrl && event.key === 'c')) {
+            app.exit(0);
+            return;
+        }
+        if (event.key === 'space' || event.key === 'enter') {
+            cb1.toggle();
+            cb2.toggle();
+            cb3.toggle();
+            sw1.toggle();
+            sw2.toggle();
+            sw3.toggle();
+        }
+        app.requestRender();
+    });
+
+    const exitCode = await app.mount();
+    process.exit(exitCode);
+}
+
+main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5ad145d1..b0188773 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -32,6 +32,7 @@
     "@standard-schema/spec": "^1.1.0",
     "@termuijs/core": "workspace:*",
     "@termuijs/jsx": "workspace:*",
+    "@termuijs/motion": "workspace:*",
     "@termuijs/tss": "workspace:*",
     "@termuijs/widgets": "workspace:*"
   },
diff --git a/packages/ui/src/Switch.ts b/packages/ui/src/Switch.ts
index c298b48f..46988dcc 100644
--- a/packages/ui/src/Switch.ts
+++ b/packages/ui/src/Switch.ts
@@ -5,8 +5,11 @@ import {
     mergeStyles,
     defaultStyle,
     styleToCellAttrs,
+    stringWidth,
     caps,
+    prefersReducedMotion,
 } from '@termuijs/core';
+import { fadeIn, fadeOut } from '@termuijs/motion';
 
 export interface SwitchOptions {
     defaultValue?: boolean;
@@ -18,6 +21,8 @@ export class Switch extends Widget {
     private _value: boolean;
     private _label?: string;
     onChange?: (value: boolean) => void;
+    private _animProgress: number;
+    private _animCancel?: () => void;
 
     focusable = true;
 
@@ -27,6 +32,7 @@ export class Switch extends Widget {
         this._value = options.defaultValue ?? false;
         this._label = options.label;
         this.onChange = options.onChange;
+        this._animProgress = this._value ? 1 : 0;
     }
 
     get value(): boolean {
@@ -38,13 +44,53 @@ export class Switch extends Widget {
 
         this._value = value;
         this.onChange?.(value);
+        this._animCancel?.();
         this.markDirty();
+
+        if (prefersReducedMotion()) {
+            this._animProgress = value ? 1 : 0;
+            return;
+        }
+
+        if (value) {
+            this._animProgress = 0;
+            this._animCancel = fadeIn(150, (p) => {
+                this._animProgress = p;
+                this.markDirty();
+            }, () => {
+                this._animProgress = 1;
+                this._animCancel = undefined;
+            });
+        } else {
+            this._animProgress = 1;
+            this._animCancel = fadeOut(150, (p) => {
+                this._animProgress = p;
+                this.markDirty();
+            }, () => {
+                this._animProgress = 0;
+                this._animCancel = undefined;
+            });
+        }
     }
 
     toggle(): void {
         this.setValue(!this._value);
     }
 
+    mount(): void {
+        super.mount();
+        if (this._value && this._animProgress < 1) {
+            this._animProgress = 1;
+            this.markDirty();
+        }
+    }
+
+    unmount(): void {
+        this._animCancel?.();
+        this._animCancel = undefined;
+        super.unmount();
+    }
+
     handleKey(event: KeyEvent): void {
         switch (event.key) {
             case 'space':
@@ -67,20 +113,35 @@ export class Switch extends Widget {
         if (width <= 0) return;
 
         const attrs = styleToCellAttrs(this.style);
+        const knobPos = Math.round(this._animProgress * 2);
+        const transitioning = this._animProgress > 0 && this._animProgress < 1;
+
+        let trackChars: string[];
+        let knobChar: string;
+        if (caps.unicode) {
+            trackChars = ['─', '─', '─'];
+            knobChar = '●';
+        } else {
+            trackChars = ['-', '-', '-'];
+            knobChar = 'O';
+        }
 
-        const track = caps.unicode
-            ? (this._value ? '──●' : '●──')
-            : (this._value ? '--O' : 'O--');
+        let cursorX = x;
 
-        const text = this._label
-            ? `${this._label} ${track}`
-            : track;
+        if (this._label) {
+            screen.writeString(cursorX, y, `${this._label} `, attrs);
+            cursorX += stringWidth(`${this._label} `);
+        }
 
-        screen.writeString(
-            x,
-            y,
-            text.slice(0, width),
-            attrs
-        );
+        for (let i = 0; i < 3; i++) {
+            const isKnob = i === knobPos;
+            const isOn = this._value;
+            screen.setCell(cursorX + i, y, {
+                char: isKnob ? knobChar : trackChars[i],
+                fg: attrs.fg,
+                dim: transitioning || (!isKnob && !isOn),
+                bold: isKnob,
+            });
+        }
     }
 }
\ No newline at end of file
diff --git a/packages/widgets/src/display/Tooltip.test.ts b/packages/widgets/src/display/Tooltip.test.ts
index ae0f99a1..6ed463b3 100644
--- a/packages/widgets/src/display/Tooltip.test.ts
+++ b/packages/widgets/src/display/Tooltip.test.ts
@@ -1,8 +1,11 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { Tooltip } from "./Tooltip.js";
-import { Screen, caps } from "@termuijs/core";
-import { vi } from 'vitest';
+import { Screen, caps, prefersReducedMotion } from "@termuijs/core";
+import * as motion from "@termuijs/motion";
 
+afterEach(() => {
+    vi.restoreAllMocks();
+});
 
 function renderTooltip(text = "help", visible = true, width = 20, height = 5) {
     const tooltip = new Tooltip({
@@ -66,7 +69,6 @@ describe("Tooltip", () => {
         vi.spyOn(caps, "unicode", "get").mockReturnValue(false);
         const { screen } = renderTooltip();
         expect(screen.back[0][0].char).toBe("+");
-        vi.restoreAllMocks();
     });
     it("setText marks widget dirty", () => {
         const tooltip = new Tooltip({
@@ -93,6 +95,77 @@ describe("Tooltip", () => {
 
         expect(tooltip.getVisible()).toBe(false);
     });
+    it("setVisible(true) starts fade-in (animOpacity resets to 0)", () => {
+        vi.spyOn(caps, "motion", "get").mockReturnValue(true);
+
+        const tooltip = new Tooltip({
+            text: "help",
+            visible: false,
+        });
+
+        expect((tooltip as any)._animOpacity).toBe(0);
+
+        tooltip.setVisible(true);
+
+        expect((tooltip as any)._animOpacity).toBe(0);
+        expect(tooltip.getVisible()).toBe(true);
+    });
+    it("setVisible(false) during fade-in cancels previous animation", () => {
+        vi.spyOn(caps, "motion", "get").mockReturnValue(true);
+
+        const tooltip = new Tooltip({
+            text: "help",
+            visible: true,
+        });
+
+        const cancel = vi.fn();
+        vi.spyOn(motion, "fadeOut").mockReturnValue(cancel);
+
+        tooltip.setVisible(false);
+
+        expect(motion.fadeOut).toHaveBeenCalledTimes(1);
+    });
+    it("renders with dim attribute during fade-out", () => {
+        vi.spyOn(caps, "motion", "get").mockReturnValue(true);
+        vi.spyOn(motion, "fadeOut").mockImplementation(
+            (_duration, onFrame, _onComplete) => {
+                onFrame(0.3);
+                return vi.fn();
+            },
+        );
+
+        const tooltip = new Tooltip({
+            text: "dimmed",
+            visible: true,
+        });
+        const screen = new Screen(20, 5);
+        tooltip.updateRect({ x: 0, y: 0, width: 20, height: 5 });
+
+        tooltip.setVisible(false);
+        tooltip.render(screen);
+
+        expect(screen.back[0][0].dim).toBe(true);
+    });
+    it("renders without dim when animOpacity is above threshold", () => {
+        vi.spyOn(motion, "fadeIn").mockImplementation(
+            (_duration, onFrame, _onComplete) => {
+                onFrame(0.7);
+                return vi.fn();
+            },
+        );
+
+        const tooltip = new Tooltip({
+            text: "bright",
+            visible: false,
+        });
+        const screen = new Screen(20, 5);
+        tooltip.updateRect({ x: 0, y: 0, width: 20, height: 5 });
+
+        tooltip.setVisible(true);
+        tooltip.render(screen);
+
+        expect(screen.back[0][0].dim).toBe(false);
+    });
 });
 
 describe("Tooltip – mutation regression tests", () => {
@@ -145,4 +218,64 @@ describe("Tooltip – mutation regression tests", () => {
         expect(tooltip.getVisible()).toBe(false);
         expect(tooltip.isDirty).toBe(true);
     });
-});
\ No newline at end of file
+});
+
+describe("Tooltip – reduced motion", () => {
+    it("skips fade-in when prefersReducedMotion is true", () => {
+        vi.spyOn(caps, "motion", "get").mockReturnValue(false);
+
+        const tooltip = new Tooltip({
+            text: "help",
+            visible: false,
+        });
+
+        tooltip.setVisible(true);
+
+        expect((tooltip as any)._animOpacity).toBe(1);
+    });
+
+    it("skips fade-out when prefersReducedMotion is true", () => {
+        vi.spyOn(caps, "motion", "get").mockReturnValue(false);
+
+        const tooltip = new Tooltip({
+            text: "help",
+            visible: true,
+        });
+
+        tooltip.setVisible(false);
+
+        expect((tooltip as any)._animOpacity).toBe(0);
+    });
+});
+
+describe("Tooltip – mount/unmount", () => {
+    it("restores animOpacity on mount if visible", () => {
+        const tooltip = new Tooltip({
+            text: "help",
+            visible: true,
+        });
+
+        (tooltip as any)._animOpacity = 0;
+        tooltip.mount();
+
+        expect((tooltip as any)._animOpacity).toBe(1);
+    });
+
+    it("cancels animation on unmount", () => {
+        vi.spyOn(caps, "motion", "get").mockReturnValue(true);
+
+        const cancel = vi.fn();
+        const tooltip = new Tooltip({
+            text: "help",
+            visible: false,
+        });
+
+        vi.spyOn(motion, "fadeIn").mockReturnValue(cancel);
+
+        tooltip.setVisible(true);
+
+        tooltip.unmount();
+
+        expect(cancel).toHaveBeenCalled();
+    });
+});
diff --git a/packages/widgets/src/display/Tooltip.ts b/packages/widgets/src/display/Tooltip.ts
index fc246873..272ba7a2 100644
--- a/packages/widgets/src/display/Tooltip.ts
+++ b/packages/widgets/src/display/Tooltip.ts
@@ -1,6 +1,13 @@
 // @termuijs/widgets — Tooltip widget
 
-import { type Screen, type Style, caps } from '@termuijs/core';
+import {
+    type Screen,
+    type Style,
+    caps,
+    prefersReducedMotion,
+    styleToCellAttrs,
+} from '@termuijs/core';
+import { fadeIn, fadeOut } from '@termuijs/motion';
 import { Widget } from '../base/Widget.js';
 
 export interface TooltipOptions {
@@ -13,25 +20,51 @@ export interface TooltipOptions {
  *
  * The widget renders within its own assigned rect.
  * The parent is responsible for positioning it via updateRect().
+ *
+ * On show/hide the tooltip plays a short fade-in/fade-out animation
+ * (150ms) using the terminal's `dim` attribute to simulate opacity.
+ * The animation is skipped when prefersReducedMotion() is true.
  */
 export class Tooltip extends Widget {
     private _text: string;
     private _visible: boolean;
+    private _animOpacity: number;
+    private _animCancel?: () => void;
 
     constructor(options: TooltipOptions, style: Partial<Style> = {}) {
         super(style);
 
         this._text = options.text;
         this._visible = options.visible;
+        this._animOpacity = options.visible ? 1 : 0;
+    }
+
+    mount(): void {
+        super.mount();
+        if (this._visible && this._animOpacity < 1) {
+            this._animOpacity = 1;
+            this.markDirty();
+        }
+    }
+
+    unmount(): void {
+        this._animCancel?.();
+        this._animCancel = undefined;
+        super.unmount();
     }
 
     protected _renderSelf(screen: Screen): void {
-        if (!this._visible) return;
+        if (this._animOpacity <= 0) return;
 
         const { x, y, width, height } = this._rect;
 
         if (width <= 0 || height <= 0) return;
 
+        const attrs = styleToCellAttrs({
+            ...this._style,
+            dim: this._animOpacity < 0.5,
+        });
+
         const tl = caps.unicode ? '┌' : '+';
         const tr = caps.unicode ? '┐' : '+';
         const bl = caps.unicode ? '└' : '+';
@@ -40,42 +73,43 @@ export class Tooltip extends Widget {
         const vt = caps.unicode ? '│' : '|';
 
         // Top border
-        screen.setCell(x, y, { char: tl });
+        screen.setCell(x, y, { char: tl, ...attrs });
 
         for (let c = 1; c < width - 1; c++) {
-            screen.setCell(x + c, y, { char: hz });
+            screen.setCell(x + c, y, { char: hz, ...attrs });
         }
 
         if (width > 1) {
-            screen.setCell(x + width - 1, y, { char: tr });
+            screen.setCell(x + width - 1, y, { char: tr, ...attrs });
         }
 
         // Content row
         if (height >= 2) {
-            screen.setCell(x, y + 1, { char: vt });
+            screen.setCell(x, y + 1, { char: vt, ...attrs });
 
             const content = this._text
                 .slice(0, Math.max(0, width - 2))
                 .padEnd(Math.max(0, width - 2), ' ');
 
-            screen.writeString(x + 1, y + 1, content);
+            screen.writeString(x + 1, y + 1, content, attrs);
 
             if (width > 1) {
-                screen.setCell(x + width - 1, y + 1, { char: vt });
+                screen.setCell(x + width - 1, y + 1, { char: vt, ...attrs });
             }
         }
 
         // Bottom border
         if (height >= 3) {
-            screen.setCell(x, y + height - 1, { char: bl });
+            screen.setCell(x, y + height - 1, { char: bl, ...attrs });
 
             for (let c = 1; c < width - 1; c++) {
-                screen.setCell(x + c, y + height - 1, { char: hz });
+                screen.setCell(x + c, y + height - 1, { char: hz, ...attrs });
             }
 
             if (width > 1) {
                 screen.setCell(x + width - 1, y + height - 1, {
                     char: br,
+                    ...attrs,
                 });
             }
         }
@@ -93,8 +127,43 @@ export class Tooltip extends Widget {
 
     setVisible(visible: boolean): void {
         if (this._visible === visible) return;
-        this._visible = visible;
-        this.markDirty();
+
+        this._animCancel?.();
+
+        if (visible) {
+            this._visible = true;
+            this._animOpacity = 0;
+            this.markDirty();
+
+            if (prefersReducedMotion()) {
+                this._animOpacity = 1;
+                return;
+            }
+
+            this._animCancel = fadeIn(150, (opacity) => {
+                this._animOpacity = opacity;
+                this.markDirty();
+            }, () => {
+                this._animOpacity = 1;
+                this._animCancel = undefined;
+            });
+        } else {
+            this._visible = false;
+            this.markDirty();
+
+            if (prefersReducedMotion()) {
+                this._animOpacity = 0;
+                return;
+            }
+
+            this._animCancel = fadeOut(150, (opacity) => {
+                this._animOpacity = opacity;
+                this.markDirty();
+            }, () => {
+                this._animOpacity = 0;
+                this._animCancel = undefined;
+            });
+        }
     }
 
     getVisible(): boolean {
diff --git a/packages/widgets/src/feedback/Spinner.test.ts b/packages/widgets/src/feedback/Spinner.test.ts
index e41549e8..96c55484 100644
--- a/packages/widgets/src/feedback/Spinner.test.ts
+++ b/packages/widgets/src/feedback/Spinner.test.ts
@@ -148,3 +148,72 @@ describe('Spinner — Presets and ASCII fallback', () => {
         expect(frames).toEqual(SPINNER_FRAMES.pulse.frames);
     });
 });
+
+describe('Spinner — Pulse animation', () => {
+    beforeEach(() => {
+        vi.spyOn(caps, 'motion', 'get').mockReturnValue(true);
+        vi.spyOn(caps, 'unicode', 'get').mockReturnValue(true);
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it('renders pulse char with dim when progress < 0.5 and bold when >= 0.5', () => {
+        const spinner = new Spinner({}, { animation: 'pulse' });
+        spinner.updateRect({ x: 0, y: 0, width: 20, height: 1 });
+
+        // Force animProgress to dim range
+        (spinner as unknown as { _animProgress: number })._animProgress = 0.3;
+        let screen = new Screen(20, 1);
+        spinner.render(screen);
+        expect(screen.back[0][0].char).toBe('█');
+        expect(screen.back[0][0].dim).toBe(true);
+        expect(screen.back[0][0].bold).toBe(false);
+
+        // Force animProgress to bold range
+        (spinner as unknown as { _animProgress: number })._animProgress = 0.7;
+        screen = new Screen(20, 1);
+        spinner.render(screen);
+        expect(screen.back[0][0].char).toBe('█');
+        expect(screen.back[0][0].dim).toBe(false);
+        expect(screen.back[0][0].bold).toBe(true);
+    });
+
+    it('renders static pulse char when motion is disabled', () => {
+        vi.spyOn(caps, 'motion', 'get').mockReturnValue(false);
+        const spinner = new Spinner({}, { animation: 'pulse' });
+        spinner.updateRect({ x: 0, y: 0, width: 20, height: 1 });
+        const screen = new Screen(20, 1);
+        spinner.render(screen);
+        expect(screen.back[0][0].char).toBe('█');
+        expect(screen.back[0][0].dim).toBe(false);
+        expect(screen.back[0][0].bold).toBe(false);
+    });
+
+    it('tick is a no-op in pulse mode', () => {
+        const spinner = new Spinner({}, { animation: 'pulse' });
+        (spinner as unknown as { _frameIndex: number })._frameIndex = 0;
+        spinner.tick(1000);
+        expect((spinner as unknown as { _frameIndex: number })._frameIndex).toBe(0);
+    });
+
+    it('uses ASCII pulse char when unicode is not available', () => {
+        vi.spyOn(caps, 'unicode', 'get').mockReturnValue(false);
+        const spinner = new Spinner({}, { animation: 'pulse' });
+        const pulseChar = (spinner as unknown as { _pulseChar: string })._pulseChar;
+        expect(pulseChar).toBe('#');
+    });
+
+    it('accepts custom pulseChar', () => {
+        const spinner = new Spinner({}, { animation: 'pulse', pulseChar: '●' });
+        const pulseChar = (spinner as unknown as { _pulseChar: string })._pulseChar;
+        expect(pulseChar).toBe('●');
+    });
+
+    it('spins frames by default when animation is not set', () => {
+        const spinner = new Spinner({}, { preset: 'line' });
+        const animation = (spinner as unknown as { _animation: string })._animation;
+        expect(animation).toBe('spin');
+    });
+});
diff --git a/packages/widgets/src/feedback/Spinner.ts b/packages/widgets/src/feedback/Spinner.ts
index 9fed29b1..722f4b8f 100644
--- a/packages/widgets/src/feedback/Spinner.ts
+++ b/packages/widgets/src/feedback/Spinner.ts
@@ -3,7 +3,7 @@
 // ─────────────────────────────────────────────────────
 
 import { type Screen, type Style, styleToCellAttrs, type Color, caps, BRAILLE_SPIN, prefersReducedMotion, stringWidth } from '@termuijs/core';
-import { timerPoolSubscribe } from '@termuijs/motion';
+import { timerPoolSubscribe, fadeIn, fadeOut } from '@termuijs/motion';
 import { Widget } from '../base/Widget.js';
 
 /**
@@ -94,6 +94,14 @@ export interface SpinnerOptions {
     doneText?: string;
     /** Custom frame interval in milliseconds */
     interval?: number;
+    /**
+     * Animation style:
+     * - `'spin'` (default) — cycle through frames at the interval
+     * - `'pulse'` — smoothly pulse a single character between dim and bright
+     */
+    animation?: 'spin' | 'pulse';
+    /** Character to use when animation is `'pulse'`. Default: `'█'` (unicode) or `'#'` (ASCII) */
+    pulseChar?: string;
 }
 
 /**
@@ -119,6 +127,10 @@ export class Spinner extends Widget {
     private _active = true;
     private _doneText?: string;
     private _startTime?: number;
+    private _animation: 'spin' | 'pulse';
+    private _pulseChar: string;
+    private _animProgress = 0.5;
+    private _animCancel?: () => void;
 
     constructor(style: Partial<Style> = {}, options: SpinnerOptions = {}) {
         super({ height: 1, ...style });
@@ -150,6 +162,9 @@ export class Spinner extends Widget {
         this._color = options.color ?? { type: 'named', name: 'cyan' };
         this._active = options.active !== false;
         this._doneText = options.doneText;
+        this._animation = options.animation ?? 'spin';
+        this._pulseChar = options.pulseChar ?? (caps.unicode ? '█' : '#');
+        this._animProgress = this._active ? 0.5 : 0;
     }
 
     /** Update the active state */
@@ -158,10 +173,18 @@ export class Spinner extends Widget {
         this._active = active;
         this.markDirty();
 
-        // Dynamically manage timer if mounted
+        // Clean up existing timers/animations
         this._timerUnsub?.();
         this._timerUnsub = undefined;
-        if (active && !prefersReducedMotion()) {
+        this._animCancel?.();
+        this._animCancel = undefined;
+
+        if (!active) return;
+        if (prefersReducedMotion()) return;
+
+        if (this._animation === 'pulse') {
+            this._startPulse();
+        } else {
             this._startTime = Date.now();
             this._timerUnsub = timerPoolSubscribe(this._interval, () => {
                 this.markDirty();
@@ -169,6 +192,30 @@ export class Spinner extends Widget {
         }
     }
 
+    /** Start the continuous pulse animation loop. */
+    private _startPulse(): void {
+        const pulseMs = this._interval * 2;
+        const fadeInFn = () => {
+            this._animCancel = fadeIn(pulseMs, (p) => {
+                this._animProgress = p;
+                this.markDirty();
+            }, () => {
+                this._animProgress = 1;
+                const fadeOutFn = () => {
+                    this._animCancel = fadeOut(pulseMs, (p) => {
+                        this._animProgress = p;
+                        this.markDirty();
+                    }, () => {
+                        this._animProgress = 0;
+                        fadeInFn();
+                    });
+                };
+                fadeOutFn();
+            });
+        };
+        fadeInFn();
+    }
+
     /** Update the spinner label */
     setLabel(label: string): void {
         this._label = label;
@@ -184,28 +231,35 @@ export class Spinner extends Widget {
     /**
      * Advance the spinner frame based on elapsed time.
      * Call this with a delta (ms) from the render loop.
+     * No-op in pulse mode (animation is driven by fadeIn/fadeOut).
      */
     tick(deltaMs: number): void {
-        if (prefersReducedMotion() || !this._active) return;
+        if (prefersReducedMotion() || !this._active || this._animation === 'pulse') return;
 
         this._elapsed += deltaMs;
         this._frameIndex = Math.floor(this._elapsed / this._interval) % this._frames.length;
     }
 
-    /** Lifecycle: start the frame-advance timer (only when motion is enabled). */
+    /** Lifecycle: start the frame-advance timer or pulse animation (only when motion is enabled). */
     mount(): void {
         super.mount();
         if (prefersReducedMotion() || !this._active) return;
-        this._startTime = Date.now();
-        this._timerUnsub = timerPoolSubscribe(this._interval, () => {
-            this.markDirty();
-        });
+        if (this._animation === 'pulse') {
+            this._startPulse();
+        } else {
+            this._startTime = Date.now();
+            this._timerUnsub = timerPoolSubscribe(this._interval, () => {
+                this.markDirty();
+            });
+        }
     }
 
-    /** Lifecycle: stop the frame-advance timer. */
+    /** Lifecycle: stop the frame-advance timer and any running animation. */
     unmount(): void {
         this._timerUnsub?.();
         this._timerUnsub = undefined;
+        this._animCancel?.();
+        this._animCancel = undefined;
         super.unmount();
     }
 
@@ -217,8 +271,20 @@ export class Spinner extends Widget {
         const attrs = styleToCellAttrs(this._style);
 
         let char = '';
+        let dim = false;
+        let bold = false;
+
         if (this._active) {
-            if (prefersReducedMotion()) {
+            if (this._animation === 'pulse') {
+                if (prefersReducedMotion()) {
+                    char = this._pulseChar;
+                } else {
+                    char = this._pulseChar;
+                    const progress = this._animProgress;
+                    dim = progress < 0.5;
+                    bold = progress >= 0.5;
+                }
+            } else if (prefersReducedMotion()) {
                 // Static fallback when motion is disabled
                 char = '[...]';
             } else {
@@ -235,7 +301,7 @@ export class Spinner extends Widget {
 
         // Render spinner character or doneText
         if (char) {
-            screen.writeString(x, y, char, { ...attrs, fg: this._color });
+            screen.writeString(x, y, char, { ...attrs, fg: this._color, dim, bold });
         }
 
         // Render label
diff --git a/packages/widgets/src/input/Checkbox.ts b/packages/widgets/src/input/Checkbox.ts
index ededd186..1fb9a65b 100644
--- a/packages/widgets/src/input/Checkbox.ts
+++ b/packages/widgets/src/input/Checkbox.ts
@@ -11,7 +11,9 @@ import {
     stringWidth,
     truncate,
     caps,
+    prefersReducedMotion,
 } from '@termuijs/core';
+import { fadeIn, fadeOut } from '@termuijs/motion';
 import { Widget } from '../base/Widget.js';
 
 export interface CheckboxOptions {
@@ -47,6 +49,8 @@ export class Checkbox extends Widget {
     private _checkedChar?: string;
     private _uncheckedChar?: string;
     private _checkedColor: Color;
+    private _animProgress: number;
+    private _animCancel?: () => void;
 
     constructor(
         label: string,
@@ -62,6 +66,7 @@ export class Checkbox extends Widget {
         this._checkedChar = opts.checkedChar;
         this._uncheckedChar = opts.uncheckedChar;
         this._checkedColor = opts.checkedColor ?? { type: 'named', name: 'green' };
+        this._animProgress = this._checked ? 1 : 0;
     }
 
     // ── Public API ──────────────────────────────────────────────────────
@@ -69,9 +74,7 @@ export class Checkbox extends Widget {
     /** Toggle the checked state. No-op if disabled. */
     toggle(): void {
         if (this._disabled) return;
-        this._checked = !this._checked;
-        this._onChange?.(this._checked);
-        this.markDirty();
+        this.setChecked(!this._checked);
     }
 
     /** Set the checked state explicitly. No-op if already the same value. */
@@ -79,7 +82,33 @@ export class Checkbox extends Widget {
         if (this._checked === checked) return;
         this._checked = checked;
         this._onChange?.(this._checked);
+        this._animCancel?.();
         this.markDirty();
+
+        if (prefersReducedMotion()) {
+            this._animProgress = checked ? 1 : 0;
+            return;
+        }
+
+        if (checked) {
+            this._animProgress = 0;
+            this._animCancel = fadeIn(150, (p) => {
+                this._animProgress = p;
+                this.markDirty();
+            }, () => {
+                this._animProgress = 1;
+                this._animCancel = undefined;
+            });
+        } else {
+            this._animProgress = 1;
+            this._animCancel = fadeOut(150, (p) => {
+                this._animProgress = p;
+                this.markDirty();
+            }, () => {
+                this._animProgress = 0;
+                this._animCancel = undefined;
+            });
+        }
     }
 
     /** Returns the current checked state. */
@@ -111,6 +140,23 @@ export class Checkbox extends Widget {
         return this._disabled;
     }
 
+    // ── Lifecycle ───────────────────────────────────────────────────────
+
+    mount(): void {
+        super.mount();
+        if (this._checked && this._animProgress < 1) {
+            this._animProgress = 1;
+            this.markDirty();
+        }
+    }
+
+    /** Cancel any in-flight animation when the widget is unmounted. */
+    unmount(): void {
+        this._animCancel?.();
+        this._animCancel = undefined;
+        super.unmount();
+    }
+
     // ── Keyboard ────────────────────────────────────────────────────────
 
     /** Handle key events. Enter and Space toggle the checkbox. */
@@ -131,11 +177,13 @@ export class Checkbox extends Widget {
         const checkedChar = this._checkedChar ?? (caps.unicode ? '✓' : '+');
         const uncheckedChar = this._uncheckedChar ?? ' ';
 
+        const progress = this._animProgress;
+        const showMark = progress > 0;
+        const mark = showMark ? checkedChar : uncheckedChar;
+
         // Box: [✓] or [ ]
         const boxOpen = '[';
         const boxClose = ']';
-        const mark = this._checked ? checkedChar : uncheckedChar;
-
         const box = `${boxOpen}${mark}${boxClose}`;
         const boxWidth = stringWidth(box);
 
@@ -145,7 +193,7 @@ export class Checkbox extends Widget {
         const fullLine = box + gap + labelPart;
 
         // Colors
-        const markColor: Color = this._checked
+        const markColor: Color = showMark
             ? this._checkedColor
             : { type: 'named', name: 'white' };
 
@@ -171,7 +219,8 @@ export class Checkbox extends Widget {
         screen.setCell(x + 1, y, {
             char: mark,
             fg: markColor,
-            bold: this._checked,
+            dim: showMark && progress < 0.5,
+            bold: showMark && progress >= 0.5,
         });
 
         // Write ']'