fluid-splash

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Fluid opening

Fluid 开场动画

An opening is shapes flowing into the logo, the logo rising, and the headline coming out of a blur, ending on the real page. It plays once per visit, can be skipped, and never blocks the product.

开场动画由流动成 logo 的图形、升起的 logo，以及从模糊中显现的标题组成，最后落在实际页面上。它每次访问播放一次，可以跳过，并且绝不会阻挡产品使用。

Pick a model

选择模型

Model	Ends on	Good for
`splash-shapes`	your own content ( `children` )	a home page with a headline and a call to action
`splash-choice`	a picker that sends the logo into other shapes	products with several audiences
`splash-dots`	the brand name	brands where the name matters

bash

npx @usefluid/cli add splash-shapes

The brand must be set first (

fluid-brand

): the pieces take

logo

from

fluid logo

模型	最终呈现	适用场景
`splash-shapes`	自己的内容（ `children` ）	包含标题和行动号召的首页
`splash-choice`	一个将 logo 送入其他图形的选择器	面向多个受众群体的产品
`splash-dots`	品牌名称	品牌名称非常重要的场景

bash

npx @usefluid/cli add splash-shapes

必须先设置品牌（

fluid-brand

）：这些组件通过

fluid logo

获取

logo

。

Steps

步骤

1. Write the words

1. 编写文案

The headline is

title

plus words that change. Keep each changing word to one or two words: they do not wrap. Too long? Shorten it, or put the long line in

children

as normal text.

标题由

title

和一些变化的词组成。每个变化的词应保持在一到两个词：它们不会换行。太长？可以缩短，或者将长句作为普通文本放入

children

。

2. Build it to end on the real page

2. 构建动画并最终呈现实际页面

tsx

"use client";
import { useEffect, useState } from "react";
import { SplashShapes } from "@/components/fluid/splash-shapes/SplashShapes";
import { logo } from "@/lib/logo";

export function Opening() {
  const [play, setPlay] = useState(false);
  useEffect(() => setPlay(sessionStorage.getItem("opening") !== "1"), []);
  return (
    <SplashShapes
      key={play ? "play" : "final"}
      logo={logo}
      as="h1"
      title="Small-batch coffee,"
      words={["roasted.", "every morning."]}
      finished={!play}
      onDone={() => sessionStorage.setItem("opening", "1")}
    >
      <p>Order ahead and pick up on your way.</p>
      <a href="/order">Order now</a>
    </SplashShapes>
  );
}

The server and later visits render the final screen (
```
finished
```
), so the page works without JavaScript. On a first visit the client remounts it to play. To avoid a flash of the final screen, a tiny inline script in
```
<head>
```
can add a class that hides it when the opening has not played yet.
```
finished
```
starts on the final screen.
Any key or tap skips to the end (
```
skippable
```
, on by default).
```
as="h1"
```
when it is the page's main heading.
```
route={[...]}
```
changes the shapes before the logo; prefer shapes related to the brand.
It fills the screen; set
```
--fluid-splash-height
```
on a parent to fit it in a box.

tsx

"use client";
import { useEffect, useState } from "react";
import { SplashShapes } from "@/components/fluid/splash-shapes/SplashShapes";
import { logo } from "@/lib/logo";

export function Opening() {
  const [play, setPlay] = useState(false);
  useEffect(() => setPlay(sessionStorage.getItem("opening") !== "1"), []);
  return (
    <SplashShapes
      key={play ? "play" : "final"}
      logo={logo}
      as="h1"
      title="Small-batch coffee,"
      words={["roasted.", "every morning."]}
      finished={!play}
      onDone={() => sessionStorage.setItem("opening", "1")}
    >
      <p>Order ahead and pick up on your way.</p>
      <a href="/order">Order now</a>
    </SplashShapes>
  );
}

服务端和后续访问会呈现最终屏幕（
```
finished
```
），因此页面在没有 JavaScript 时也能正常工作。首次访问时，客户端会重新挂载组件以播放动画。为避免最终屏幕闪现，可以在
```
<head>
```
中添加一个很小的内联脚本，在开场动画尚未播放时添加一个用于隐藏它的 class。
```
finished
```
会从最终屏幕开始。
任意按键或点击都会跳至结尾（
```
skippable
```
，默认开启）。
当它是页面的主标题时，使用
```
as="h1"
```
。
```
route={[...]}
```
会在 logo 之前改变图形；优先选择与品牌相关的图形。
它会填满屏幕；在父元素上设置
```
--fluid-splash-height
```
，使其适配指定容器。

3. Check

3. 检查

Reduced motion shows the final screen at once.
The content is not clickable or focusable before it shows (the pieces make it inert).
At 320 px nothing is cut off or scrolls sideways.
It is free for interaction in under 5 s. The default route ends at about 4 s; a shorter
```
route
```
is faster.
With server rendering and no JavaScript, the page still shows its content. In a client-only app this does not apply.

启用减少动态效果时，会立即显示最终屏幕。
在最终画面显示前，内容不可点击或获得焦点（各个片段会使其处于
```
inert
```
状态）。
在 320 px 宽度下，没有任何内容被截断，也不会出现横向滚动。
5 秒内即可进行交互。默认 route 约在 4 秒结束；更短的 route 会更快完成。
使用服务端渲染且没有 JavaScript 时，页面仍会显示其内容。纯客户端应用不适用此规则。

Common mistakes

常见错误

Mistake	Fix
A long sentence as a changing word	One or two words; the rest as normal text
The last shape of the route looks like the logo	Change `route` , so the logo's arrival reads
Playing it on every page	Only on the first screen, once per visit
A full page squeezed into `children`	`children` sit in a column at most 460 px wide. For a dashboard or grid, render the content after the opening and reveal it in `onDone`

错误	修复方式
将长句作为变化的词	控制在一到两个词；其余内容作为普通文本
route 的最后一个图形看起来像 logo	更改 route，让 logo 的登场衔接自然
在每个页面上都播放	仅在首个屏幕上播放，每次访问播放一次
将整个页面塞入 `children`	`children` 以最大宽度 460 px 的列布局。对于 dashboard 或 grid，在开场动画后渲染内容，并通过 `onDone` 显示它