Motion
CardResize
A container that tweens its width and height when its content changes (.t-resize).
Guidelines#
What you provide: explicit width and height values that change (the transition needs numbers, not auto). 300ms on cubic-bezier(0.22, 1, 0.36, 1) (--resize-*); instant under reduced motion.
Use it for panels that expand in place — the Ask Max panel resize uses it. For height-only disclosure use Accordion or Collapsible.
Facts#
| Group | Motion |
|---|---|
| Product | Crew OS and Max |
| Kind | Showcase page (tokens and patterns, not a single export) |
| Source | : app/transitions.css |
Example#
The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.
<div id="root" class="p-6"></div>
<script>
(function () {
var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
var s = React.useState(false), big = s[0];
return h("div", { className: "grid gap-3" },
h("div", { className: "t-resize overflow-hidden rounded-xl border bg-card p-4", style: { width: big ? 420 : 260, height: big ? 150 : 76 } },
h("p", { className: "text-sm font-medium" }, big ? "Sender rotation · 3 mailboxes" : "Sender rotation"),
big ? h("p", { className: "mt-2 text-sm text-muted-foreground" }, "Each mailbox sends at most 40 a day while warming. Max spreads the rest across the week.") : null),
h(DC.Button, { size: "sm", variant: "outline", className: "w-fit", onClick: function () { s[1](!big); } }, big ? "Collapse" : "Expand"));
}
ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>