launchreel Confetti

launchreel 彩纸

品牌色洗过的亮舞台，弹跳淡入字，卡片轮播，步骤标签弹出，甩镜。

A light stage washed in the brand colour, bouncy fade-up type, card carousel, number bento, step tags popping, whip pans.

LAUNCHREEL CONFETTI132–148 bpm

Plans, but fun

3 friends joined

16:9 frame mock · light

Palette

Type

标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.

Display	Inter, "Noto Sans SC", system-ui, sans-serif
Body	Inter, "Noto Sans SC", system-ui, sans-serif
super	144px
chapter	64px
ui title	40px
body	28px
label	22px

Display Inter, body Inter. Chinese films: Noto Sans SC. Sizes at 1920×1080.

Shape & surface

radius · card	12px
radius · screen	18px
shadow	none
glass	none

Motion

Entrance: fade-up (ease-out).
Tempo 132–148 bpm (picked per domain inside the range); hold 600ms.
Transitions: cut, whip-pan, zoom, flash-scan.

Film parameters

Resolution	1920×1080
Stage	brand-tinted stage (example brand #2F6DF6)
Grain / vignette	off / off
Device	none
Entrance	fade-up
Tempo	132–148 bpm
Hold	600ms
Layouts (stats / steps / features / screens)	bento / step-tags / carousel / sweep
Transitions	cut, whip-pan, zoom, flash-scan
Openings	word-swap, tilt-screen
End cards	tile, wordmark
Best for	consumer-app / community

Do / Don't

Do

Short holds (600ms), high tempo.
Word-swap opening.
Whip pans between sections.

Don't

Don't use grain or serif.
Don't hold a frame still for long.

Used in

launchreel look menu

Sources

launchreel: src/lib/style/look-menu.ts (LOOK_MENU), src/lib/style/look.ts, src/lib/style/defaults.ts

Updated 2026-10-13

Export

/* launchreel Confetti / launchreel 彩纸 — A light stage washed in the brand colour, bouncy fade-up type, card carousel, number bento, step tags popping, whip pans. */
:root {
  --launchreel-confetti-bg: #E2EAFE;
  --launchreel-confetti-surface: color-mix(in oklab, #ffffff 70%, #E2EAFE);
  --launchreel-confetti-ink: #121318;
  --launchreel-confetti-muted: #4F5770;
  --launchreel-confetti-accent: #2F6DF6;
  --launchreel-confetti-accent-ink: #ffffff;
  --launchreel-confetti-line: color-mix(in oklab, #121318 14%, #E2EAFE);

  --launchreel-confetti-pal-stage-bg: #E2EAFE;
  --launchreel-confetti-pal-ink: #121318;
  --launchreel-confetti-pal-muted: #4F5770;
  --launchreel-confetti-pal-accent-example: #2F6DF6;
  --launchreel-confetti-pal-accent-2-example: #8698D5;

  --launchreel-confetti-font-display: Inter, "Noto Sans SC", system-ui, sans-serif;
  --launchreel-confetti-font-body: Inter, "Noto Sans SC", system-ui, sans-serif;
  --launchreel-confetti-text-super: 144px;
  --launchreel-confetti-text-chapter: 64px;
  --launchreel-confetti-text-ui-title: 40px;
  --launchreel-confetti-text-body: 28px;
  --launchreel-confetti-text-label: 22px;

  --launchreel-confetti-radius-card: 12px;
  --launchreel-confetti-radius-screen: 18px;
  --launchreel-confetti-shadow: none;
}

/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
  --color-bg: #E2EAFE;
  --color-surface: color-mix(in oklab, #ffffff 70%, #E2EAFE);
  --color-ink: #121318;
  --color-muted: #4F5770;
  --color-accent: #2F6DF6;
  --color-accent-ink: #ffffff;
  --color-line: color-mix(in oklab, #121318 14%, #E2EAFE);
  --font-display: Inter, "Noto Sans SC", system-ui, sans-serif;
  --font-sans: Inter, "Noto Sans SC", system-ui, sans-serif;
  --radius-card: 12px;
  --radius-screen: 18px;
}

// Tailwind v3 — tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        "bg": "#E2EAFE",
        "surface": "color-mix(in oklab, #ffffff 70%, #E2EAFE)",
        "ink": "#121318",
        "muted": "#4F5770",
        "accent": "#2F6DF6",
        "accent-ink": "#ffffff",
        "line": "color-mix(in oklab, #121318 14%, #E2EAFE)",
      },
      fontFamily: {
        display: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
        sans: ["Inter, \"Noto Sans SC\", system-ui, sans-serif"],
      },
      borderRadius: {
        "card": "12px",
        "screen": "18px",
      },
    },
  },
};