Programmatic sky

程序化天空

云层、柔光和颗粒组成的实时天空背景。

A little atmosphere.

色温云量流速

<ProgrammaticSky warmth={0.12} clouds={0.45} drift={0.79} wind={[1, 0]} />

交互方式

调整色温、云量、流速和风向，再复制当前参数。减少动态效果时显示静态天空。

使用示例

import { ProgrammaticSky } from "@/components/ui/programmatic-sky"

export function Demo() {
  return <ProgrammaticSky warmth={0.2} clouds={0.7} drift={0.5} wind={[1, 0]} style={{ height: 400 }} />
}

参数

参数	类型 / 默认值	说明
`warmth`	`number`	色温，0 到 1。
`clouds`	`number`	云层覆盖，0 到 1。
`softness`	`number`	柔焦程度，0 到 1。
`drift`	`number`	流速，0 到 3。
`grain`	`number`	颗粒强度，0 到 0.08。
`wind`	`[number, number]`[1, 0]	风向向量，内部自动归一化。
`children`	`ReactNode`	显示在天空前方的内容。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxtailwind-merge

components/ui/programmatic-sky.css
components/ui/programmatic-sky.tsx
lib/ando-sora-sky.d.ts
lib/ando-sora-sky.js
lib/utils.ts

来源

沿用 JungUI 已有的 Ando Sora 渲染实现。