Curiosity Components
Description
Tesserae.Themes.Curiosity carries five components from the Curiosity website next to the theme: PixelIntro, FlowField, PixelGlyph, DashMosaic and GeneratingImage. They draw with the brand's colors directly, so they work with or without the theme active. Each runs its animation loop only while it is on screen and stands still under prefers-reduced-motion.
Add the package, then import the namespace:
using Tesserae.Themes.Curiosity; // PackageReference Tesserae.Themes.Curiosity
In the gallery these samples sit in a "Curiosity Components" group that only shows while the Curiosity theme is active.
Usage
PixelIntro.PlayOnce(); // the first-load animation, once per tab
PixelIntro.PlayOnce(PixelIntroStyle.Tiles); // the tile sweep instead
new FlowField().H(360); // the hero's dash field on ink; the pixel follows the pointer
new FlowField().OnPaper().Fade(FlowFieldFade.Left).NoInteraction().NoAnimation();
new PixelGlyph(PixelGlyphKind.PlayBacklog, 96).ShowLabel(); // any of the website's 85 glyphs
PixelGlyph.Custom(new[] { 1,1,0,4, 1,1,1,0, 1,1,1,0, 0,0,0,0 }); // your own 16 cells
new DashMosaic(DashMosaicScheme.DarkBlue);
new DashMosaic(DashMosaicScheme.Light, DashMosaicPattern.Band).NoAnimation();
new GeneratingImage(3, 2).Progress(89); // half the parent's width, 3:2
new GeneratingImage(16.0 / 9).WidthFraction(0.75);
Components
| Component | What it draws | Main methods |
|---|---|---|
PixelIntro |
The website's first-load animation. PlayOnce plays on the first load of a tab (a reload replays it, as on the website); Play plays now. Styles: SquareField (default) and Tiles. |
PlayOnce(style), Play(style) |
FlowField |
The brand's dash field, redrawn at its size. | Surface, OnInk, OnPaper, Fade, Mark, Pitch, DotAt, Drift, Animated, NoAnimation, Interactive, NoInteraction |
PixelGlyph |
4 by 4 pixel glyphs. PixelGlyphKind lists every glyph on the website, and an animation is a string of frames. |
Palette, Animated, NoAnimation, Playback, RestHold, ShowEmptyCells, ShowLabel, Size, Replay, Custom, FromAnimation |
DashMosaic |
The animated dash tiles, in four DashMosaicScheme values (LightBlue, Dark, DarkBlue, Light) and seven DashMosaicPattern values (Wave, Rows, Chart, ChartGrid, Mountain, Band, Dither). |
Animated, NoAnimation, Seed, EdgePadding, FramesPerSecond |
GeneratingImage |
The placeholder for an image that is being made: a field of square pixels that swell and fade in waves from the middle. | Progress, Label, NoProgress, WidthFraction, AspectRatio, Pitch, Animated, NoAnimation, FramesPerSecond |
PixelGlyph frames
A glyph animation is a string of frames. Each frame holds 16 cells, / separates rows, :ms sets how long the frame stays and :label names it. Cells are palette keys: digits, or ., k, s, a, *, o, d, t. Decode, Encode and BuildAnimation are public.
PixelGlyph.FromAnimation("k.../..../..../.... kk../..../..../....:400")
.Palette(new Dictionary<int, string> { [PixelGlyph.Ink] = "#0029E7" });
GeneratingImage
The placeholder is drawn in the active theme's surface and primary colors and redraws when the theme or its mode changes. It is half as wide as its parent by default (in a FullWidth() chat message, half the chat area), and the height follows from the aspect ratio, so nothing moves when the image arrives. Progress(percent) shows a badge in the bottom right corner and fills the field as the value nears 100. Label replaces the number.