SnowUILogo handbook

License: Before reading component documentation, source, or npm usage instructions for the first time, read the full LICENSE. Reuse that review for the same task and version. Public API configuration and internal implementation changes have different license implications. All components use the unified runtime package; source rights remain governed by the license.

Overview

Display the SnowUI icon, wordmark, or combined logo in horizontal or vertical layouts for brand links and page signatures.

When to use it

Use it for SnowUI brand artwork. Reuse its public variants instead of recreating the mark with text, screenshots, or hand-drawn SVG.

• variant selects the icon, wordmark, or combined layout; scale changes the whole mark proportionally.

• The component does not navigate. Wrap it in a link when navigation is needed, and set decorative when the mark is purely decorative.

Quick start

This example shows the recommended basic composition. See the sections below for more cases and composition limits.

<script lang="ts">	import { SnowUILogo, Text } from '@snowui-design-system/components';</script> <SnowUILogo scale={2} />

API

See the base component documentation for inherited capabilities not redeclared here. This table lists only named public Props declared by this component.

Usage boundaries and details

Layout model

Main layout model: internal atomic layout.

• icon: The design benchmark is 28 × 28.

• text: The design benchmark is 71 × 12.

• horizontal: 28 × 28 icon + 6 spacing + 71 × 12 word mark, the whole 105 × 28.

• vertical: 60×60 icon + 15px gap + 119×20 wordmark, for a 119×95 whole mark; scale scales every part together.

• The icon and wordmark are fixed brand geometry, not public SnowUI subcomponents. The component accepts no children or generic slots.

Usage examples

<SnowUILogo variant="icon" /><SnowUILogo variant="text" /><SnowUILogo variant="horizontal" /><SnowUILogo variant="vertical" />

<SnowUILogo variant="horizontal" scale={2} />

Used as a homepage link

SnowUILogo owns the brand appearance and has no built-in href, routing, or open behavior. To link the mark to the home page, wrap it in a native <a> or your router’s Link:

<a href="/" aria-label="Return to SnowUI home">    <SnowUILogo variant="horizontal" /></a>

The host link then controls the destination, client routing, target, and rel, while SnowUILogo remains responsible for appearance.

Site favicon synchronization rules

• When changing the icon artwork (path, shape, color, gradient, or proportions), update site/src/lib/assets/favicon.svg in the same task so the site favicon matches the component’s static icon.

• Keep the favicon transparent and static, without a wordmark, emoji, or animation. Changes limited to hover, rotation, floating, or the wordmark do not require a favicon change.

• After synchronization, check the favicon link in the Site root layout and its actual browser load. Update derived docs and static asset lists through the Site sync process before submission.

Idle dynamic effect

• Idle motion is off by default; enable it with idleMotion={true}. The Site homepage controls where and when to enable it (site/docs/SiteRequirements.md); the component does not inspect routes or Header state. Hover greetings are independent. Turning idle motion off restores the static mark.

• The icon rotates clockwise at a constant rate, one revolution every 16 seconds. It also floats vertically on a 5.8-second cubic-bezier(.45, 0, .55, 1) cycle, rising by one-seventh of its side length (12px at the Site’s 84px icon size).

• Both idle animations affect only the icon; the wordmark and hit area stay still. On hover, the outgoing brand icon pauses and the emoji does not rotate or float. On restoration, the mark fades back at its original position and restarts the idle cycle.

• This brand motion, like hover motion, is independent of Frame’s enableDefaultMotion. It does not play under reduced-motion preferences. Rotation and floating animate native SVG transform attributes, not a CSS transform layer; the SVG clock pauses while the page is hidden.

Vector wordmark motion

<SnowUILogo textMotion="variants" scale={2} />

• textMotion="greetings" keeps the original multilingual greetings. variants cycles six fixed vector treatments of the SnowUI letters: lines, pixels, outlines, italic, stripes, and bold. The letters remain SnowUI, inspired by the Apple Mac mini opening; no external font, image, or video is loaded.

• Only the text changes. The icon keeps the original synchronized emoji cycle; icon-only marks have no text to animate. The static state and restoration use the original brand wordmark.

• Each letter keeps fixed horizontal coordinates and canvas. A 220ms compressed flip, slight blur, and opacity transition appear from left to right, staggered by 24ms. Stable targets still start 1000ms apart, with the same completion, restoration, and ten-second continuation rules as greetings.

• Leaving restores the static mark; the next hover starts the cycle again. Reduced motion, page hiding, and unmounting stop it. Horizontal marks align left; vertical and wordmark-only variants center. scale and compactProgress scale everything together. The accessible name remains SnowUI.

• These are fixed brand vector effects; arbitrary text, fonts, and timing are not configurable. When disabled, no variant graphics or dedicated timers are created. A small amount of static shape code ships with the component; it has no separately measured package increment.

Hover motion (original version)

• The icon and letters cycle together through stable states, targeting a 1000ms interval. Each transition must complete before a stable state is shown; busy frames do not catch up. The outgoing icon shrinks to 45% over 320ms while blurring and fading; the next icon grows, sharpens, and fades in.

• Text is split into grapheme clusters. The common prefix remains; changed middle clusters transition from left to right over 550ms, moving 0.35em, shrinking to 60%, rotating 2°, and blurring 0.1em. The stagger window is 30% of 550ms. Glyphs follow natural width; matching characters move smoothly, while brand letters retain fixed horizontal positions at entry and exit.

• Font size is calibrated against the actual glyph height of the snowui font while preserving its natural width; all greetings use that size. It is remeasured after the font loads. Position and size are expressed in em relative to glyph height and scale with scale and compactProgress. Vertical wordmarks do not clip descenders, accents, or transition blur. Long greetings may extend beyond the fixed outer frame without shrinking.

• In horizontal variants, icon and text cycle together through emoji and greetings. The brand and greetings align left at a fixed gap after the icon; long words extend right. Vertical and wordmark-only variants stay centered. Arabic retains right-to-left word order even though the whole horizontal mark remains left-aligned.

• The brand logo is disassembled into six independent vector letters according to Workshop 15907:19183; each letter retains the independent gradient of the design draft. The size of the outer frame is stable, and the internal text is naturally typeset according to the content.

• Dynamic graphics do not participate in pointer hits, and the hover range is owned by a stable Logo outer frame; text overflow, scaling and old glyph unloading will not change the hit range.

• Icon-only marks cycle emoji; wordmark-only marks cycle greetings; combined variants cycle both. During a transition, pointer entry or exit updates only the latest hover intent without cancelling or skipping the current step. After that step, continue cycling if hovered, or restore the brand if not. Restoration itself completes before any later hover intent runs.

• Keep the last completed greeting for ten seconds after pointer exit without overwriting it during restoration. For example, exiting after B and hovering again continues at C; after ten seconds, start at A. Rapid hover events retain only the latest intent.

• Scale the system emoji glyph to fit and center within the brand icon’s 32×32 viewBox based on its visible color pixels. Match the icon’s longest edge without stretching nonsquare emoji. It follows scale and compactProgress; appearance may vary by OS. Greetings are visual decoration only; the accessible name stays SnowUI and is not announced for each frame.

• Keep the static brand under prefers-reduced-motion: reduce and do not start the loop; preference switching, page hiding and uninstalling all stop the loop.

• This is a brand-specific implementation approved by the user. It does not rely on NumericText or general text animation when running, and does not provide general text animation API; subsequent maintenance will not automatically follow NumericText.

Continuous collapse

compactProgress controls only the vertical mark’s own geometry; it does not read scrolling or navigation state. The caller supplies a continuous 0–1 value. The icon shrinks from 60px to 28px while the wordmark and gap close and disappear. scale still scales the final geometry proportionally. The Site owns homepage positioning and scroll timing.

Wordmark colors

• The bottom layer of Snow is --black-100, and the upper layer is the linear gradient of each letter independently from left to right: --white-10 → #FFFFFF00. The starting point retains Figma's White/10% variable binding, and switches to black 10% with the dark theme.

• The bottom layer of UI is --brand, and the upper layer is a linear gradient from top to bottom: #FFFFFF00 → #FFFFFF66. These two gradient endpoints are fixed white and do not switch with the theme.

• SVG gradient and path reference use instance independent ID, and multiple logos on the same page do not interfere with each other.

Accessibility

By default the mark has role="img" and aria-label="SnowUI". Set decorative for purely decorative use, or provide a custom aria-label for a different accessible name.

The component provides Frame with renderHints corresponding to the current variant and scale; the Skeleton state will retain the same outer frame size.