---
title: group
description: Names a set of fields, so an actor reads card.typography.size and spawns with nested inputs.
---

`group` puts fields under one name. The fields inside stay what they were: signals, derived
values, channels or other groups. A group adds a level to the path and nothing else, so it
changes how a value is read and spawned and never how it animates.

```ts twoslash title="card.ts"
import { group, LayoutActor, signal } from "@motionactor/core";

export class Card extends LayoutActor {
  typography = group({
    size: signal(48),
    color: signal("#ffffff"),
    shadow: group({ blur: signal(0) }),
  });
}
```

```ts twoslash
// @filename: card.ts
import { group, LayoutActor, signal } from "@motionactor/core";
export class Card extends LayoutActor {
  typography = group({
    size: signal(48),
    color: signal("#ffffff"),
    shadow: group({ blur: signal(0) }),
  });
}
// @filename: card.scene.ts
// ---cut---
import { createScene } from "@motionactor/core";
import { Card } from "./card";

const compiled = createScene(function* (ctx) {
  const card = ctx.spawn(Card, {
    typography: { size: 64, shadow: { blur: 8 } },
  });
  yield* card.typography.shadow.blur.tween(0, 0.5);
  return { card };
}).build({ viewport: { width: 1920, height: 1080 }, fps: 30 });

compiled.at(0).scene.card?.typography;
// { size: 64, color: "#ffffff", shadow: { blur: 8 } }
```

Spawn inputs nest the same way. Fields left out keep their defaults, so `color` stays white.
In reflection and editors each field has its dotted path, such as `typography.shadow.blur`.

A subclass inherits its parent's groups. Redeclaring a group in a subclass replaces the whole
group, so restate every field it keeps.

## The groups every LayoutActor has

| Group | Fields |
| --- | --- |
| `layout` | `x`, `y`, `width`, `height` |
| `transform` | `scale`, `rotation` (degrees) |
| `appearance` | `opacity` |
| `compositing` | `blend`, `isolate`, `clip` |
| `flexItem` | `alignSelf` |
| `gridItem` | `gridColumn`, `gridRow` |

[LayoutActor](/docs/actors/layout-actor) covers what each one does.

## layoutGroup

`layoutGroup(overrides)` builds the `layout` group with new defaults. Redeclare `layout` with
it to change an actor's default box without restating the axes you leave alone:

```ts twoslash
import { createScene, LayoutActor, layoutGroup } from "@motionactor/core";

class Thumbnail extends LayoutActor {
  layout = layoutGroup({ width: 320, height: 180 });
}

const compiled = createScene(function* (ctx) {
  const thumb = ctx.spawn(Thumbnail, { layout: { x: "50%" } });
  return { thumb };
}).build({ viewport: { width: 1920, height: 1080 }, fps: 30 });

compiled.at(0).scene.thumb?.layout;
// { x: "50%", y: 0, width: 320, height: 180 }
```

A layout value is a number of pixels, a percentage string such as `"50%"`, or `pct(50)`.
`layout` keeps the value as authored. The resolved box, `localLayout` and `worldLayout`, is
always in pixels, with percentages taken of the host's box or the scene's viewport.