@xwink/ui

    Aurora

    背景氛围层:顶部极光彩带 + 稀疏光斑呼吸,缓解大面积深色的压抑感。固定铺满视口并落在 -z-10,宿主不要再给页面铺不透明底色,否则会盖住它。

    动画只动 opacity / transform / filter,不触发布局;prefers-reduced-motion 下全部静止。

    不传 props 就是主站在用的那套(三条彩带 + 三处光斑)。整组替换:

    vue
    <XAurora
      :ribbons="[{ left: '10%', rotate: 12, color: 'rgba(45,212,191,0.3)', sway: '26s' }]"
      :blobs="[{ top: '-10%', left: '-10%', size: '50vw', alpha: 0.24 }]"
    />
    

    彩带的静态倾角走独立 rotate 属性,动画只接管 transform,二者自动复合。摆动 / 呼吸 / 色变三条动画独立计时、节奏错开——同步起来一眼就能看出是在放循环动画。

    光斑 color 缺省跟随 --ui-primary;主站默认那套比主色亮一档,大面积柔光用主色本身会发闷。

    API

    Props

    名称类型默认值说明
    ribbonsAuroraRibbon[] | undefined—整组替换彩带;不传用主站那套三条配置
    blobsAuroraBlob[] | undefined—整组替换光斑;不传用主站那套三处配置