# DesignXperia / An intentional curve Good interface design connects user intent to a controlled, usable form. Logo animation: A curve draws between two user intents and resolves into a stable interface. Intro 2.56s; logo loop 4.26s. Loader: A control point travels along the experience curve. A 1.34s indeterminate cycle, never a percentage. This kit uses the saved new identity. The canonical logo geometry, colour and lettering are preserved. Non-destructive masks and uniform transforms reveal the artwork. Supporting geometry is specific to the brand concept and is not a replacement logo. See `../identity-direction.json` for the complete grammar. ## Files - `animated-logo.svg`: introduction with a clean final hold. - `animated-logo-loop.svg`: repeat with an extended visible hold. - `loader.svg`: 200 x 200 concept-specific loader. - `static-loader.svg`: same composition without animation. - `animated-symbol.svg` and `.webp`: concept-led symbol motion. - `BrandLoader.tsx`, `loader.css`: React and framework-neutral integration. - `loader.html`: interactive pause/replay/completion preview. - `static-mark.png`: exact selected symbol fallback. ## Integration ```tsx ``` `fullscreen` defaults to true and uses a fixed 100svh, safe-area-aware overlay. Use false for inline content. Copy the supporting font files with their licences or load the assigned family through your application's typography system. Host the selected exact mark at the URL passed through `logoSrc`. The decorative SVG is bundled in the component, not fetched from an external service. Set loading to false when the real request settles. Do not gate navigation behind decorative intros. Reduced-motion preference disables SVG/CSS movement. For the animated WebP choose `static-mark.png` with a prefers-reduced-motion source/media rule; bitmap animations cannot read CSS themselves. Provide a pause control for continuous decorative loops. The preview demonstrates this. Website source and public deployment are unchanged by this design handoff.