# Intentface React logos

Copy this folder into your React project. Requires React 19+, TypeScript, and a
JSX-capable build tool. No Next.js, Tailwind, icon library, font, or external image
dependency. Animation styles are included and deduplicated by React. These are
client components and can be imported from a Next.js server component.

```tsx
import { IntentfaceLogo } from "./IntentfaceLogo";
import { LatchLogo } from "./LatchLogo";
import { IntentfaceOSLogo } from "./IntentfaceOSLogo";
import { IntentfaceUILogo } from "./IntentfaceUILogo";
import { IntentfaceEventsLogo } from "./IntentfaceEventsLogo";

export function BrandLogos() {
  return (
    <div style={{ background: "#18181c", padding: 32 }}>
      <IntentfaceLogo width={200} />
      <LatchLogo size={40} state="idle" />
      <IntentfaceOSLogo size={48} state="thinking" />
      <IntentfaceUILogo size={96} state="draw" />
      <IntentfaceEventsLogo size={96} state="active" />
    </div>
  );
}
```

Import only the components you need. The single-brand ZIPs include only their
required source files. Intentface OS needs `loredex-mark.tsx`,
`loredex-geometry.ts`, and `cn.ts` beside it. Keep those files together.
`IFOSLogo` is an alias for `IntentfaceOSLogo`.
`IntentfaceAsterisk.tsx` is the standalone asterisk with its line (it imports a type
from `IntentfaceLogo.tsx`, so keep the two together). Use it only where Intentface
is named elsewhere in the same context.

## Color, size, and accessibility

- All support `variant="original"` (default), `"white"`, or `"black"`.
- On a light background, use `<IntentfaceLogo background="light" />` for the
  original gradient with a black name, and `<IntentfaceUILogo background="light" />`
  for a black cursor and line. Product gradients stay the same on both
  backgrounds; choose `variant="black"` when you need stronger contrast.
- Intentface accepts `width` (default 152) and optional `height`. Latch and
  Intentface OS accept `size` (default 32). Intentface UI accepts `size`, its width and
  height in pixels (default 240), and so does Intentface Events. Numbers mean pixels; CSS lengths also
  work. Keep the original aspect ratio when overriding dimensions.
- All accept `className`, `style`, and SVG attributes.
- Accessible labels default to the brand name. Set `label=""` when a logo is
  decorative, for example beside the same name in text. A custom `label` changes
  the accessible name. Multiple instances use unique gradient and mask IDs.

## Motion

- Latch: `state="idle"` (default), `"still"`, `"happy"`, or `"working"`.
- Intentface OS: `state="still"` (default), `"thinking"`, `"writing"`, `"adding"`,
  `"success"`, or `"closed"`. `speed={2}` doubles motion speed. `spin={false}`
  disables ring turns; `solo={false}` lets all books animate together.
- Intentface OS sweeps its gradient by default. Use
  `state="still" sweep={false}` for a static product mark.
- Intentface UI: `state="still"` (default) is the Intentface asterisk. `"draw"`
  plays once on mount: a cursor clicks, turns and locks into the asterisk (remount
  with a new `key` to replay; `onDrawEnd` fires when it finishes). `speed={2}`
  doubles motion speed. `IntentfaceUIMark` takes your own `color` and `gradient`
  stops instead of a variant.
- Intentface Events: `state="still"` (default) is half a globe beside the asterisk.
  `"draw"` plays once on mount: a tilted globe spins up and rights itself, then the
  asterisk opens and crops its right half away (`onDrawEnd` fires when it finishes).
  `"active"` keeps the half globe spinning; switching back to `"still"` lets it come
  to rest. `speed={2}` doubles motion speed. `IntentfaceEventsMark` takes your own
  `color` and `gradient` stops instead of a variant.
- Intentface's full logo is static.
- Reduced-motion preferences suppress animation. Styles are namespaced so they
  do not change unrelated elements. No stylesheet import is needed.

Use the complete Intentface name and asterisk together. Keep all six books in
the Intentface OS logo. These assets are provided for identifying the brands;
downloading them does not transfer trademark rights or imply endorsement.

Guidelines: https://www.intentface.com/brand/DESIGN.md