{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "motionactor", "homepage": "https://github.com/methodacting/motioncomponents", "families": [ { "name": "browser", "title": "Browser", "description": "Browser UI surfaces and panels.", "icon": "panel-top" }, { "name": "calendar", "title": "Calendar", "description": "Calendar layouts and timeline-style date views.", "icon": "calendar" }, { "name": "charts", "title": "Charts", "description": "Animated chart actors and shared charting primitives.", "icon": "chart-column" }, { "name": "code", "title": "Code", "description": "Code editors, terminals, file trees, and developer UI.", "icon": "braces" }, { "name": "desktop", "title": "Desktop", "description": "Desktop windowing and workstation-style surfaces.", "icon": "monitor" }, { "name": "diagrams", "title": "Diagrams", "description": "Decision flows, network graphs, and explanatory diagrams.", "icon": "workflow" }, { "name": "documents", "title": "Documents", "description": "Document viewers, annotations, and page-based surfaces.", "icon": "file-text" }, { "name": "globe", "title": "Globe", "description": "3D globe visualizations and surface renderers.", "icon": "globe" }, { "name": "handdrawn", "title": "Hand-drawn", "description": "Boiling marker annotations — arrows, rings and titles that redraw themselves every few frames.", "icon": "sparkles" }, { "name": "input", "title": "Input", "description": "Input devices, command palettes, and keyboard interactions.", "icon": "mouse-pointer" }, { "name": "layout", "title": "Layout", "description": "Layout and container actors for arranging content.", "icon": "layout" }, { "name": "media", "title": "Media", "description": "Images, video, audio, and media playback surfaces.", "icon": "film" }, { "name": "overlays", "title": "Overlays", "description": "Callouts, spotlights, and attention-directing overlays.", "icon": "layers" }, { "name": "scene3d", "title": "Scene3D", "description": "3D scenes, objects, cameras, and immersive visual systems.", "icon": "blocks" }, { "name": "timelines", "title": "Timelines", "description": "Timeline and chronology actors for time-based storytelling.", "icon": "book-open" }, { "name": "ui", "title": "UI", "description": "Interface widgets, text treatments, feedback, and utility surfaces.", "icon": "sparkles" } ], "collections": [ { "name": "emphasis", "namespace": "fx-emphasis", "title": "Emphasis", "description": "Attention effects that mark an actor without changing the layout around it.", "icon": "sparkles" }, { "name": "reveals", "namespace": "fx-reveals", "title": "Reveals", "description": "Reveal and dissolve effects that take a whole actor off or on screen.", "icon": "layers" }, { "name": "treatments", "namespace": "fx-treatments", "title": "Treatments", "description": "Full-surface look treatments applied to a whole actor.", "icon": "sparkles" } ], "recipeAxes": [ { "name": "camera", "namespace": "recipe-camera", "title": "Camera", "description": "Camera moves — how the frame travels, what it points at, and how long it holds before and after.", "icon": "film" }, { "name": "transition", "namespace": "recipe-transition", "title": "Transition", "description": "Scene changes — how one shot hands over to the next, and what the handover tells the audience.", "icon": "workflow" } ], "recipes": [ { "name": "recipe-camera/basic-3d-scene", "axis": "camera", "title": "Spatial step tour", "oneLiner": "Cards are scattered through a 3D space with their own poses; the camera flies to the inverse of each card's transform in turn, then pulls back to an overview.", "whenToUse": "A concept, roadmap or three-step method that should be told as travel through the space of an idea rather than as slides — each step arrives by turning the world, so the turn itself is the chapter marker.", "jobs": [ "orient", "bridge" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 87, "preHoldFrames": 20, "postHoldFrames": 30 }, "params": [ { "name": "stepPose", "typicalValue": "each stop introduces at least one new transform axis (x/y/z/rx/ry/rz/scale)", "feelWhenWrong": "moving only x/y is a translating slide deck; the rz stop that lays the frame on its side is the memorable one, so spend it once per film" }, { "name": "flightDuration", "typicalValue": "0.16 of the shot (~29f at 30fps) per leg", "feelWhenWrong": "a leg with rotation faster than ~22f gives the audience no time to read that the world turned" }, { "name": "dwellBetweenLegs", "typicalValue": "0.10–0.12 of the shot", "feelWhenWrong": "when a card carries a lot of text, add dwell rather than shortening the flight" }, { "name": "overviewScale", "typicalValue": "s = 3.1, i.e. the camera pulls back to 1/3.1", "feelWhenWrong": "larger reads as higher altitude; every card must fit the frame with about 10% margin left over" }, { "name": "focusFalloff", "typicalValue": "opacity floor 0.28, blur peak 3.5px by distance from the active stop", "feelWhenWrong": "below about 0.2 opacity the off-focus cards leave the room and the space collapses" }, { "name": "perspective", "typicalValue": "1000px against a maximum |z| of ~520 (about 2:1)", "feelWhenWrong": "deeper z without more perspective distorts the cards at the edges" } ], "pitfalls": [ "The camera is the inverse of the step transform, so its rotation order (Z→Y→X) must be exactly the reverse of the card's (X→Y→Z); a single-axis stop hides the mistake and a compound stop tilts.", "A card's pose is consumed twice — by the card and by the camera formula — so adding a stop means editing the pose table only, never either transform expression.", "Text on the rz 90° stop is unreadable until the camera levels it; that is the point, but keep the copy on that stop short.", "There is no return leg after the overview, so it ends a section; looping back to the first stop needs an explicit fly-back." ], "usageCaps": [], "variants": [], "appliesTo": [ "layout/flex-container", "ui/text-block", "scene3d/scene3d" ], "referenceImpl": "video-shotcraft demos/camera/basic-3d-scene/ (Basic3DScene.tsx)", "tags": [ "camera", "3d", "chapter" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/basic-3d-scene.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/basic-3d-scene.md", "derivedFrom": "Technique studied from the remotion-bits.dev example collection (https://remotion-bits.dev/) and re-implemented from scratch upstream; see the donor's references/shots/ATTRIBUTION.md." } }, { "name": "recipe-camera/crash-zoom-punch", "axis": "camera", "title": "Crash zoom punch", "oneLiner": "One beat from the wide to a target close-up — a 6-frame ease-in zoom that either overshoots and springs back, or slams to a stop with a decaying screen shake.", "whenToUse": "The beat that names a card or module as the subject. A slow push says \"please look\"; this says \"look at THIS\" and leaves the audience no choice — reserve it for the moment the section actually turns on that element.", "jobs": [ "emphasize" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 6, "preHoldFrames": 30, "postHoldFrames": 45 }, "params": [ { "name": "zoomFrames", "typicalValue": "6f (4–8f), ease-in", "feelWhenWrong": "past ~10f it reads as an ordinary push-in and the impact is gone" }, { "name": "targetZoom", "typicalValue": "2.4–2.8, framed so the target fills 60–75% of frame", "feelWhenWrong": "framing on the end position, not the number, is what makes it land" }, { "name": "reboundAmount", "typicalValue": "3–6% of the zoom (2.6 → 2.45 over ~5f)", "feelWhenWrong": "more than that reads as a spring toy rather than a camera" }, { "name": "shakeEnvelope", "typicalValue": "14px amplitude, e^(−t/1.8), dry within ~6f", "feelWhenWrong": "under the perceptual threshold it may as well be absent; over ~20px it reads as a glitch" }, { "name": "motionBlur", "typicalValue": "shutterAngle 200, samples 20, wrapped around the zoom only", "feelWhenWrong": "blurring the slam-stop shake as well throws away the crispness the impact is made of" } ], "pitfalls": [ "The landing frame is held in close-up for the whole post-hold, so the target has to be a high-resolution slot — a low-scale screenshot turns to mush the moment it arrives.", "Never mix the two landings in one shot: rebounding and then shaking reads as a mistake.", "The donor's values were tuned on placeholder assets, so re-verify against real material the first time it ships." ], "usageCaps": [ { "scope": "film", "maxUses": 2, "note": "A third turns the loudest move in the kit into punctuation.", "variant": null } ], "variants": [ { "name": "rebound", "summary": "The zoom overshoots the target scale and springs back 3–6% over about 5f.", "useWhen": "The emphasis is \"look at this\" — energetic, but the section continues afterwards." }, { "name": "slam-shake", "summary": "The zoom stops dead on the target frame and the camera shakes at high frequency with exponential decay, no rebound.", "useWhen": "The emphasis is \"it's THIS one\" — the heaviest available full stop." } ], "appliesTo": [ "browser/browser-panel", "ui/*", "charts/*" ], "referenceImpl": "video-shotcraft demos/camera/crash-zoom-punch/ (CrashZoomReal.tsx / CrashImpactReal.tsx)", "tags": [ "camera", "zoom", "impact" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/crash-zoom-punch.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/crash-zoom-punch.md" } }, { "name": "recipe-camera/cursor-flyover", "axis": "camera", "title": "Cursor flyover", "oneLiner": "A whole page fades in from an overhead view, then the camera steps to four corners in close-up while a cursor travels on the same interpolation and leaves a click ripple at each stop.", "whenToUse": "A feature tour of a single page: one continuous camera strings four regions into a walking route, and the cursor stands in for the audience's attention — where it points is where they look, and the spatial continuity teaches the layout too.", "jobs": [ "demonstrate", "orient" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 86, "preHoldFrames": 36, "postHoldFrames": 24 }, "params": [ { "name": "closeUpScale", "typicalValue": "1.72 against an overhead 0.8", "feelWhenWrong": "past ~2.2 placeholder screenshots turn to mush; real high-resolution captures take 2.5" }, { "name": "stepRhythm", "typicalValue": "0.12 transition, 0.08 dwell, repeated", "feelWhenWrong": "a dwell under 0.05 turns a tour into a sweep — the dwell is where the feature is read" }, { "name": "clickRipple", "typicalValue": "0.055 long, ring scaling 0.3 → 1.9 while fading", "feelWhenWrong": "the ripples are the metronome; land them evenly or the tour loses its pulse" }, { "name": "cursorCompensation", "typicalValue": "cursor scaled by 1/cameraScale", "feelWhenWrong": "without it the cursor balloons in close-up and stops reading as a UI layer" }, { "name": "routeOrder", "typicalValue": "top-left → top-right → bottom-right → bottom-left", "feelWhenWrong": "visiting non-adjacent corners in sequence is disorienting" }, { "name": "openingFocus", "typicalValue": "blur 5px → 0 across the first 0.14", "feelWhenWrong": "skipping it loses the \"this is the whole thing\" establishing beat" } ], "pitfalls": [ "Camera and cursor share one interpolation, so \"cursor arrives before the camera\" is not expressible — decoupling needs a second table of the same shape.", "The camera table's aim points are content-percentage coordinates: change the aspect ratio and the whole table has to be re-measured.", "The dwell segments are completely static and can read as a freeze on a large display; a sub-pixel deterministic drift under 1px fixes it.", "Placeholder screenshots must be swapped for the real product and the four cursor landing points re-measured to real control centres." ], "usageCaps": [], "variants": [], "appliesTo": [ "ui/cursor", "browser/browser-panel", "layout/flex-container" ], "referenceImpl": "video-shotcraft demos/camera/cursor-flyover/ (CursorFlyover.tsx)", "tags": [ "camera", "cursor", "tour" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/cursor-flyover.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/cursor-flyover.md", "derivedFrom": "Technique studied from the remotion-bits.dev example collection (https://remotion-bits.dev/) and re-implemented from scratch upstream; see the donor's references/shots/ATTRIBUTION.md." } }, { "name": "recipe-camera/depth-layer-moves", "axis": "camera", "title": "Depth layer moves", "oneLiner": "Two ways to give a flat page thickness — a three-layer parallax dolly with a speed gradient, and a fake dolly-zoom where the subject is nailed down while the world swells toward it.", "whenToUse": "A section where a flat screenshot has to feel like it has depth. Parallax is the everyday texture move; the dolly-zoom is the dramatic one, for the beat where tension has to build before something lands.", "jobs": [ "exhibit", "agitate" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 120, "preHoldFrames": 12, "postHoldFrames": 24 }, "params": [ { "name": "parallaxCoefficients", "typicalValue": "0.35 background / 0.7 mid / 1.4 foreground on one shared drive", "feelWhenWrong": "layers less than 2× apart are indistinguishable; more than four layers is noise" }, { "name": "depthAnchors", "typicalValue": "blur on foreground and background, desaturate the background to ~0.92", "feelWhenWrong": "without blur and desaturation the layers read as stickers flying around, not as depth" }, { "name": "dollyTravel", "typicalValue": "background scale 1 → 2.0–2.5 from the frame centre, blur 0 → 3.5px", "feelWhenWrong": "a shorter travel has no pressure; a background over ~0.6 opacity reads as a rendering fault" }, { "name": "subjectShadow", "typicalValue": "offset deepens 12px → 28px as the background swells", "feelWhenWrong": "the deepening shadow is what sells the subject being pinned rather than shrinking" } ], "pitfalls": [ "The reading layer — the mid-ground in parallax, the subject in the dolly-zoom — must stay sharp and high-resolution; it is what the audience is actually reading.", "Layer whole compositions, not torn-apart page internals: the relationship between layers is depth of field, never a page being ripped open.", "Combining parallax with a rotated 3D page camera is unverified upstream — render a still before committing to it." ], "usageCaps": [ { "scope": "film", "maxUses": 1, "note": "The dolly-zoom is seasoning; let parallax carry ordinary sections.", "variant": "dolly-zoom" } ], "variants": [ { "name": "multiplane", "summary": "Three layers slide on one drive at 0.35 / 0.7 / 1.4, the background blurred and desaturated, the foreground blurred and skimming the lens.", "useWhen": "A horizontal move through a page that should feel like it has depth — the everyday version." }, { "name": "dolly-zoom", "summary": "The subject is pinned in device pixels while the background layer scales 1 → 2.25 from centre and blurs, its shadow deepening.", "useWhen": "A dramatic build where the subject must not move and the world closes in — once per film." } ], "appliesTo": [ "layout/parallax-stage", "media/image", "fx-treatments/blur" ], "referenceImpl": "video-shotcraft demos/camera/depth-layer-moves/ (MultiplaneReal.tsx / DollyZoomReal.tsx)", "tags": [ "camera", "parallax", "depth" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/depth-layer-moves.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/depth-layer-moves.md" } }, { "name": "recipe-camera/graze-face-tour", "axis": "camera", "title": "Grazing face tour", "oneLiner": "The camera flies low across the surface of a UI at a steep angle — sidebar trees and list rows as terrain — while text hovering above the interface drops into place in a staggered wave, each element casting a matching soft shadow while it is still in the air.", "whenToUse": "A region-by-region tour where the interface should assemble itself as the camera passes: the shot is both the move and the entrance, so it fits a dark-scene product section that has to introduce several areas without cutting.", "jobs": [ "exhibit", "reveal" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 135, "preHoldFrames": 10, "postHoldFrames": 20 }, "params": [ { "name": "hoverHeight", "typicalValue": "120–180px along the surface normal", "feelWhenWrong": "under 80px neither the shadow nor the travel reads; over 250px the landing feels like a drop" }, { "name": "shadowCoupling", "typicalValue": "blur, offset and opacity all track the current hover height and reach zero on landing", "feelWhenWrong": "a constant shadow reads as a sticker; the shadow IS the proof that the element is in the air" }, { "name": "landingStagger", "typicalValue": "normalised 0.2 → 0.85 in the camera's direction of travel", "feelWhenWrong": "landing everything on one frame reads as a switch; the drops must overlap in flight, never queue one after another" }, { "name": "fallCurve", "typicalValue": "accelerating fall with a soft landing", "feelWhenWrong": "an ease-out fall reads as a balloon settling — gravity comes from the acceleration" }, { "name": "segmentCrossfade", "typicalValue": "at least 8f of overlap when relaying between segments", "feelWhenWrong": "non-overlapping opacity windows produce a black flash frame at the seam" }, { "name": "depthOfField", "typicalValue": "blur increasing with distance", "feelWhenWrong": "an all-sharp frame reads as a flat scroll, not as a camera grazing a surface" } ], "pitfalls": [ "Airborne elements need about 1.3× extra lift or a key light, otherwise a dark ambient band swallows them and the hover is invisible.", "This card is the grazing camera PLUS the drop-in entrance; using only half of it means reaching for one of the pure camera recipes instead.", "Tour shots stagger the landings, but a whole-cast entrance lands everything on one frame — picking the wrong grammar fails in both directions.", "The donor replicates one continuous upward shot as three relayed segments hidden in crossfades; a true single take costs far more in path planning." ], "usageCaps": [], "variants": [], "appliesTo": [ "layout/flex-container", "code/file-tree", "ui/text-block" ], "referenceImpl": "video-shotcraft demos/camera/graze-face-tour/ (GrazeFaceTour.tsx)", "tags": [ "camera", "ui-entrance", "tour" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/graze-face-tour.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/graze-face-tour.md", "derivedFrom": "Technique studied from a publicly posted ClickUp promo (clickup-30) and re-implemented upstream from scratch with placeholder assets; no source footage, art or brand elements travel with it." } }, { "name": "recipe-camera/overhead-camera-moves", "axis": "camera", "title": "Overhead reveal and tabletop drop", "oneLiner": "Two ways to let the pitch angle carry the story — a page lying flat that the camera tilts upright into view, and an overhead pan across a tabletop of page cards that dives into the chosen one.", "whenToUse": "An opening or a chapter change where the audience should feel the camera choosing: the tilt reveal establishes a single page, the tabletop drop surveys several and commits to one.", "jobs": [ "reveal", "orient" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 85, "preHoldFrames": 25, "postHoldFrames": 47 }, "params": [ { "name": "tiltStart", "typicalValue": "rotateX −80° with transformOrigin 50% 0%", "feelWhenWrong": "the donor's first pass at −55° was rejected: half the page is visible at frame zero and there is no strip of suspense" }, { "name": "tiltCoupling", "typicalValue": "perspective 600 → 1200 and perspectiveOrigin 5% → 40% interpolated with the tilt, scale 3.2 → 1", "feelWhenWrong": "without the coupled perspective the steep angle never shows \"only the top bar\"" }, { "name": "tiltOvershoot", "typicalValue": "≤3° past level, resolved within ~8f", "feelWhenWrong": "more than that reads as a spring rather than a camera settling" }, { "name": "panSegment", "typicalValue": "translateX only, +700 → −650 over ~55f, in-out cubic, angle locked", "feelWhenWrong": "moving the angle during the pan blurs the two jobs — the pan surveys, the drop commits" }, { "name": "dropSegment", "typicalValue": "rotateX 62 → 0 with overshoot, scale 1 → 2.0 and translateX → 0, all on one drive over ~30f", "feelWhenWrong": "running the three channels in sequence reads as two separate actions" }, { "name": "groundPlane", "typicalValue": "a light grid floor under the card array", "feelWhenWrong": "with no floor reference the pan does not read as camera movement at all" } ], "pitfalls": [ "At steep angles cards need backfaceVisibility hidden plus a small translateZ, or individual frames show the back face.", "The tilt reveal and a crane-rise opening are the same beat; using both in one film means neither reveals anything.", "Both variants are large camera gestures and are mutually exclusive with the other camera recipes in the same section.", "Card geometry is exact (16:9 at the drop scale) so the landing fills the frame; changing the card size means re-deriving the drop scale." ], "usageCaps": [ { "scope": "section", "maxUses": 1, "note": "Use one large camera gesture per section.", "variant": null } ], "variants": [ { "name": "tilt-reveal", "summary": "A whole page lies flat at rotateX −80° and the camera tilts it upright over ~43f, rows flooding into view, with a small overshoot at the end.", "useWhen": "A single-subject establishing opening." }, { "name": "overhead-tabletop-drop", "summary": "Three pages lie flat as a tabletop array; the camera pans across them at a locked angle, then dives into one, levelling it to full frame.", "useWhen": "A chapter change or opening where several pages are surveyed and one is chosen." } ], "appliesTo": [ "browser/browser-panel", "media/image", "layout/flex-container" ], "referenceImpl": "video-shotcraft demos/camera/overhead-camera-moves/ (TiltReveal.tsx / OverheadTabletopDrop.tsx)", "tags": [ "camera", "opening", "transition" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/overhead-camera-moves.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/overhead-camera-moves.md" } }, { "name": "recipe-camera/space-camera-moves", "axis": "camera", "title": "Exploded view and drone dive", "oneLiner": "Two ways to shoot a page as a 3D object — components exploding apart along Z and reassembling with a screen-shake, and a near-vertical dive that decelerates onto a hero card.", "whenToUse": "The showpiece beat of a section: the exploded view answers \"what is this made of\", the drone dive answers \"here is the whole map, and here is the one thing we are talking about\".", "jobs": [ "demonstrate", "exhibit" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 105, "preHoldFrames": 15, "postHoldFrames": 30 }, "params": [ { "name": "explodeBase", "typicalValue": "perspective 1600, group scale 0.76, rotateX 18° rotateY −12°, preserve-3d", "feelWhenWrong": "exploding a head-on page reads as flat — the tilt is where the depth comes from" }, { "name": "explodeTravel", "typicalValue": "translateZ 60–320px per component, 3f stagger, 14f ease-out-back(1.7)", "feelWhenWrong": "identical depths read as the whole page floating up rather than coming apart" }, { "name": "reassemble", "typicalValue": "reverse order, 12f ease-in, then a ~13px exponentially decaying shake on the landing frame", "feelWhenWrong": "without the shake the parts settling reads as a soft fade rather than a mechanism closing" }, { "name": "depthAnchors", "typicalValue": "shadows drop and soften with z, base plate darkened ~22%, far layers ~28% dimmer", "feelWhenWrong": "with any one of the three cues missing the layer order is unreadable" }, { "name": "divePath", "typicalValue": "one drive for rotateX 72 → 0, scale 0.42 → 1.35 and the translation, origin pinned to the hero card centre", "feelWhenWrong": "driving them separately reads as three animations fighting" }, { "name": "diveVelocity", "typicalValue": "25f ease-in cubic covering ~82% of the travel, then 20f ease-out quintic for the last ~18%", "feelWhenWrong": "the 82/18 split is what produces the air-cushion deceleration; frame counts matter less than the ratio" } ], "pitfalls": [ "The exploded view needs the page captured as separate components — one flat screenshot cannot come apart — and absolute positioning to replicate the grid.", "The dive ends in close-up, so its landing target must be prepared at high resolution before the shot is worth rendering.", "Remotion has no quintic easing constant; the donor hit this and used a degree-5 polynomial easing instead." ], "usageCaps": [ { "scope": "film", "maxUses": 2, "note": "These are large moves; spend no more than two between both variants.", "variant": null }, { "scope": "section", "maxUses": 1, "note": "Never use both large moves in the same section.", "variant": null } ], "variants": [ { "name": "exploded-view", "summary": "A tilted page's components stagger apart along Z, hover for a beat, then reverse and land with a screen shake.", "useWhen": "An architecture or composition section — what the product is made of." }, { "name": "drone-dive-landing", "summary": "A near-vertical overhead hover dives at the hero card and decelerates onto it in close-up, with motion blur across the whole move.", "useWhen": "A chapter start that goes from the global view to a single focus." } ], "appliesTo": [ "scene3d/scene3d", "layout/flex-container", "browser/browser-panel" ], "referenceImpl": "video-shotcraft demos/camera/space-camera-moves/ (ExplodedView.tsx / DroneDiveLanding.tsx)", "tags": [ "camera", "3d", "showpiece" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/space-camera-moves.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/space-camera-moves.md" } }, { "name": "recipe-camera/steep-tilt-glide", "axis": "camera", "title": "Steep tilt glide", "oneLiner": "The camera is nailed down while a page stands up at a 60° perspective and slides along its own plane past the lens, trailing speed ghosts, its elements dropping out of the air as they pass.", "whenToUse": "A long page or a multi-region UI that should be shown off as one continuous take, with content filing past a fixed viewpoint — the counterpart to the grazing tour, where the camera moves and the page is still.", "jobs": [ "exhibit" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 120, "preHoldFrames": 0, "postHoldFrames": 0 }, "params": [ { "name": "tiltAngle", "typicalValue": "rotateY −60° (converged upstream from −45° and −53°)", "feelWhenWrong": "outside roughly 55–65° it stops being this shot: shallower has no drama, steeper makes the content unreadable" }, { "name": "motionModel", "typicalValue": "camera constants never change; the page translates along its own local X", "feelWhenWrong": "moving the camera instead turns the shot into a camera flourish and loses the \"the page is presenting itself\" reading" }, { "name": "slideCurve", "typicalValue": "bezier(0.3, 0.12, 0.72, 0.9) — soft start, near-constant middle, tail slope not returning to zero", "feelWhenWrong": "a curve that reaches zero stops dead mid-shot; fully linear loses the breath at the start" }, { "name": "speedGhosts", "typicalValue": "two trailing layers sampled ~2.5f and ~5f back, opacity proportional to slide speed", "feelWhenWrong": "constant-opacity ghosts read as a double-image fault" }, { "name": "pageWidth", "typicalValue": "at least three screens of content", "feelWhenWrong": "a narrow page finishes in two seconds and cannot carry a single take" }, { "name": "hoverDrop", "typicalValue": "elements hover 230–280px with matching shadows and land staggered along the direction of travel", "feelWhenWrong": "the same grammar as the grazing tour — synchronised landings read as a switch" } ], "pitfalls": [ "The perspective angle is this recipe's identity: adjust within 55–65° and no further, or it becomes a different technique.", "It is mutually exclusive with the grazing face tour in one section — one moves the camera, the other moves the page, and together they cancel out.", "The shot deliberately does not come to rest at the end; treat its exit as a cut point rather than adding a settle.", "Hand-built extra-wide pages are expensive; a real long screenshot substitutes with the slide logic unchanged." ], "usageCaps": [], "variants": [], "appliesTo": [ "layout/flex-container", "media/image", "ui/text-block" ], "referenceImpl": "video-shotcraft demos/camera/steep-tilt-glide/ (SteepTiltGlide.tsx)", "tags": [ "camera", "ui-entrance", "perspective" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/steep-tilt-glide.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/steep-tilt-glide.md", "derivedFrom": "Technique studied from a publicly posted ClickUp promo (clickup-30) and re-implemented upstream from scratch with placeholder assets; no source footage, art or brand elements travel with it." } }, { "name": "recipe-camera/tension-camera-moves", "axis": "camera", "title": "Tension camera moves", "oneLiner": "Four small, emotionally loaded moves — a bullet-time freeze and orbit, a dutch angle rolling level, an imperceptible slow push cut off at its peak, and a pull-back that isolates one card as its neighbours go dark.", "whenToUse": "The emotional beats of a film rather than its showpieces: the moment worth stopping time for, the moment a problem is set right, the build before a declaration, and the final shot where only one thing is left.", "jobs": [ "agitate", "emphasize" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 120, "preHoldFrames": 20, "postHoldFrames": 40 }, "params": [ { "name": "freezeClocks", "typicalValue": "content plays on a remapped frame while the camera runs on the real frame", "feelWhenWrong": "if the content is not visibly, completely still during the freeze, the orbit reads as a normal camera move" }, { "name": "orbitSweep", "typicalValue": "rotateY 0 → 55° → 0 with a ~10f hold at the top, scale 1 → 1.12 → 1", "feelWhenWrong": "55° is the minimum that reads as \"around to the side\"; past ~70° the panel turns into paper" }, { "name": "dutchAngle", "typicalValue": "−10° with a ±0.8° long-period drift and a 2px vertical float, scaled 1.15 to hide the corners", "feelWhenWrong": "a perfectly static tilt reads as a framing mistake rather than as discomfort" }, { "name": "rollCorrection", "typicalValue": "14f ease-out through level to +1.2°, then 10f back to zero", "feelWhenWrong": "one overshoot is a hand straightening the frame; two or more is a spring toy" }, { "name": "slowPush", "typicalValue": "scale 1.00 → 1.14 over ~120f on an accelerating curve, vignette opacity 0 → 0.5 on the same curve", "feelWhenWrong": "constant-speed reads as an ordinary zoom; past ~1.2 it stops being subliminal" }, { "name": "pullBack", "typicalValue": "scale 2.2 → 0.62 over ~110f, origin locked to the hero card centre", "feelWhenWrong": "siblings must extinguish nearest-first — out-of-order darkening reads as a fault" } ], "pitfalls": [ "The freeze-orbit fights any other time manipulation in the same shot; pick the semantics (stopped for you to look at, versus stopped to be annotated) rather than the resemblance.", "The slow push is designed to be imperceptible for its first two seconds — judge it in playback, not by diffing early frames.", "The hard cut at the top of the slow push is the release: any transition there wastes the whole build, and the scene it cuts to has to be fully readable.", "The pull-back is a closing gesture and collides with any expansive outro; choose one." ], "usageCaps": [ { "scope": "film", "maxUses": 2, "note": "These moves are emotional punctuation; use at most two of the four.", "variant": null }, { "scope": "film", "maxUses": 1, "note": "Repeating the freeze-orbit spends it.", "variant": "bullet-time-freeze-orbit" }, { "scope": "film", "maxUses": 1, "note": "Repeating the dutch roll spends it.", "variant": "dutch-roll-to-level" }, { "scope": "film", "maxUses": 1, "note": "Repeating the slow push spends it.", "variant": "slow-push-in" }, { "scope": "film", "maxUses": 1, "note": "Repeating the pull-back spends it.", "variant": "pull-back-isolation" } ], "variants": [ { "name": "bullet-time-freeze-orbit", "summary": "Content freezes mid-growth while the camera orbits the hovering plane through 55° and back, then time resumes.", "useWhen": "The coronation beat for a chart or a number — the moment worth stopping the clock." }, { "name": "dutch-roll-to-level", "summary": "The whole frame hangs at −10° with a slow drift, then rolls level in one beat with a single overshoot.", "useWhen": "The problem-to-solution turn; the world being set right." }, { "name": "slow-push-in", "summary": "An accelerating 4-second push from 1.00 to 1.14 with a deepening vignette, released by a hard cut at the peak.", "useWhen": "The build before a big number or a declaration." }, { "name": "pull-back-isolation", "summary": "A pull-back from a glowing hero card while sibling cards extinguish nearest-first and the background sinks to black.", "useWhen": "The closing shot — the one thing the whole film was for." } ], "appliesTo": [ "charts/*", "ui/text-block", "layout/flex-container" ], "referenceImpl": "video-shotcraft demos/camera/tension-camera-moves/ (BulletTimeFreezeOrbit.tsx / DutchRollToLevel.tsx / SlowPushIn.tsx / PullBackIsolation.tsx)", "tags": [ "camera", "emotion", "pacing" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/tension-camera-moves.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/tension-camera-moves.md" } }, { "name": "recipe-camera/terminal-3d", "axis": "camera", "title": "Terminal flight", "oneLiner": "Three terminal windows sit at different poses in a 3D space; the camera flies between them with a sine-shaped pull-back mid-flight, and at each stop a command types itself and its output slides out line by line.", "whenToUse": "A CLI or workflow demo for a developer product, where three commands should read as three stations on a journey instead of one scrolling pane — the mid-flight pull-back also shows that there is more of the workflow than the current window.", "jobs": [ "demonstrate", "orient" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 51, "preHoldFrames": 15, "postHoldFrames": 20 }, "params": [ { "name": "pullBackBulge", "typicalValue": "sin(π) × 210px across each flight", "feelWhenWrong": "removing it turns the flight into a pan with no take-off or landing; past ~300 it exits the background" }, { "name": "flightToDwellRatio", "typicalValue": "0.14 flight against 0.20 dwell", "feelWhenWrong": "the dwell has to contain the typing, the output and a beat to read — it cannot be trimmed first" }, { "name": "focusFalloff", "typicalValue": "divisor ~420px, blur peak 2.2px, opacity floor 0.34", "feelWhenWrong": "windows must be spaced at more than about 1.5× the divisor or the off-focus ones never recede" }, { "name": "typeSpeed", "typicalValue": "a command of ~16 characters across 0.09 of the shot", "feelWhenWrong": "a longer command at the same window speeds the typing past readability — keep character counts close" }, { "name": "outputStagger", "typicalValue": "0.022 per line, each line 0.035 long", "feelWhenWrong": "four lines take about 0.15; more lines means tightening the interval, not overrunning the dwell" }, { "name": "windowPoses", "typicalValue": "rotateY ±16–32°, z between −110 and +90", "feelWhenWrong": "windows all facing front degrade the shot into a flat carousel" } ], "pitfalls": [ "The camera is the exact inverse of the window transform: change the pose table only, never either transform expression.", "Typing starts only after arrival — typing in flight splits the attention between the move and the text.", "The cursor blink rate is derived from the shot duration, so changing the duration changes it; check that the fast-while-typing, slow-while-idle contrast survives.", "Leave tail room after the last window's output or the final line is still arriving when the shot cuts.", "Placeholder commands are generic tooling; real commands must keep the same shape — short command, three or four lines of output." ], "usageCaps": [], "variants": [], "appliesTo": [ "code/terminal", "code/code-display", "scene3d/scene3d" ], "referenceImpl": "video-shotcraft demos/camera/terminal-3d/ (Terminal3D.tsx)", "tags": [ "camera", "terminal", "developer" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/camera/terminal-3d.md", "license": "Apache-2.0", "sourcePath": "references/shots/camera/terminal-3d.md", "derivedFrom": "Technique studied from the remotion-bits.dev example collection (https://remotion-bits.dev/) and re-implemented from scratch upstream; see the donor's references/shots/ATTRIBUTION.md." } }, { "name": "recipe-transition/bottom-push-stack-wipe", "axis": "transition", "title": "Bottom push stack wipe", "oneLiner": "The next scene rises from the bottom edge as a rigid block and pushes the current one up and out; a soft edge shadow travelling on the seam sells one card sliding over another.", "whenToUse": "A step-to-step advance inside one section, where the two scenes are peers and the audience should feel a deck being dealt rather than a cut — the direction of travel encodes \"forward\" without any label saying so.", "jobs": [ "bridge" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 30, "preHoldFrames": 37, "postHoldFrames": 37 }, "params": [ { "name": "pushDistance", "typicalValue": "the full frame height — both scenes translate on one shared drive", "feelWhenWrong": "any gap between them breaks the rigid-body reading immediately" }, { "name": "wipeCurve", "typicalValue": "ease-in-out cubic across ~30f", "feelWhenWrong": "linear reads as a slide projector; a bounce reads as a toy" }, { "name": "seamShadow", "typicalValue": "a 40-60px gradient riding the seam, opacity peaking mid-wipe", "feelWhenWrong": "without it the two scenes look like one image scrolling instead of two cards stacking" }, { "name": "outgoingParallax", "typicalValue": "the outgoing scene travels ~0.85 of the incoming one", "feelWhenWrong": "an exactly equal rate is a scroll; too much difference breaks the stack illusion" }, { "name": "holds", "typicalValue": "at least 30f of readable hold on both sides", "feelWhenWrong": "the wipe is fast, so all the reading time lives in the holds" } ], "pitfalls": [ "Both scenes must be full-bleed at the same aspect; a letterboxed scene shows the background through the seam.", "Direction carries meaning — reusing the same upward push for a step backward tells the audience the wrong thing.", "The seam crosses the middle of the frame, so nothing critical should live on the centre line during the wipe.", "Do not stack this with a scale or a fade: the recipe's whole claim is that the frame stays rigid." ], "usageCaps": [], "variants": [], "appliesTo": [ "layout/flex-container", "ui/text-block", "browser/browser-panel" ], "referenceImpl": "video-shotcraft demos/transition/bottom-push-stack-wipe/ (BottomPushStackWipe.tsx)", "tags": [ "transition", "wipe", "step" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/bottom-push-stack-wipe.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/bottom-push-stack-wipe.md", "derivedFrom": "Technique studied from a publicly posted Slack promo (22-27s) and re-implemented upstream from scratch with placeholder assets; no source footage or brand elements travel with it." } }, { "name": "recipe-transition/card-flip-reveal", "axis": "transition", "title": "Card flip reveal", "oneLiner": "Cards rotate about their own Y axis to swap face for back, staggered across the group so the flip travels as a wave rather than a switch.", "whenToUse": "Turning a set of claims into a set of proofs — question to answer, before to after, feature name to feature detail — where the two states belong to the same object and the audience must not lose track of which card became which.", "jobs": [ "prove", "reveal" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 26, "preHoldFrames": 24, "postHoldFrames": 40 }, "params": [ { "name": "flipDuration", "typicalValue": "26f per card, ease-in-out", "feelWhenWrong": "under ~18f the back face arrives before the eye has followed the turn" }, { "name": "stagger", "typicalValue": "4-6f between cards in reading order", "feelWhenWrong": "a synchronised flip reads as a crossfade of the whole grid and loses the physicality" }, { "name": "faceSwap", "typicalValue": "swap at 90°, backface-visibility hidden on both faces", "feelWhenWrong": "swapping late shows a mirrored face for a frame or two, which reads as a rendering fault" }, { "name": "perspective", "typicalValue": "1200px per card, not on the group", "feelWhenWrong": "one shared group perspective makes edge cards flip on a visibly different axis" }, { "name": "lightingSweep", "typicalValue": "a specular band peaking at 90°", "feelWhenWrong": "a flat flip looks like a texture change rather than a solid object turning" } ], "pitfalls": [ "The back face must be the answer to the front face; unrelated content wastes the one thing the move asserts, that these are two sides of one thing.", "Cards need enough spacing that a mid-flip card at 90° does not collide with its neighbour.", "More than about six cards makes the wave outlast the audience's patience — flip in rows instead.", "Do not flip and move in the same beat; the flip is the statement." ], "usageCaps": [], "variants": [], "appliesTo": [ "ui/text-block", "charts/comparison-chart", "layout/flex-container" ], "referenceImpl": "video-shotcraft demos/transition/card-flip-reveal/ (CardFlipReveal.tsx)", "tags": [ "transition", "flip", "before-after" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/card-flip-reveal.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/card-flip-reveal.md" } }, { "name": "recipe-transition/circle-match-iris", "axis": "transition", "title": "Circle match iris", "oneLiner": "A round element in the outgoing scene — a donut chart, an avatar, a logo mark — grows into a circular mask that the next scene is already living inside, so the shape carries the cut.", "whenToUse": "A chapter change where the two scenes share a circular motif; the match makes the jump feel inevitable rather than arbitrary, and it doubles as an answer to \"where did that number come from\".", "jobs": [ "bridge", "prove" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 34, "preHoldFrames": 30, "postHoldFrames": 36 }, "params": [ { "name": "matchAlignment", "typicalValue": "the circle centres of the two scenes within about 2% of frame width", "feelWhenWrong": "a visible centre jump destroys the match and it reads as a plain iris wipe" }, { "name": "expansionCurve", "typicalValue": "ease-out over ~34f from the source radius to beyond the frame diagonal", "feelWhenWrong": "stopping at the frame edge leaves the corners uncovered for a frame" }, { "name": "edgeTreatment", "typicalValue": "a 2-4px feather, or a 1px ring travelling with the mask edge", "feelWhenWrong": "a hard aliased edge reads as a cheap mask; a heavy blur loses the shape" }, { "name": "innerScenePush", "typicalValue": "the incoming scene rests at ~1.06 and settles to 1.0 as the mask opens", "feelWhenWrong": "a static inner scene reads as a hole cut in a still image" }, { "name": "colorHandoff", "typicalValue": "the source circle's dominant colour tints the ring for the first third", "feelWhenWrong": "without it the two scenes look unrelated despite the shape match" } ], "pitfalls": [ "It only works when both scenes genuinely have a circle to match; forcing one in for the sake of the transition shows.", "The circle must not be near a frame edge, or the expansion is lopsided and the corners fill at very different times.", "The mask cannot be reused as a general reveal — the whole value is the shape correspondence.", "Text near the mask edge is clipped mid-word; keep the first third of the incoming scene's copy inside the starting radius." ], "usageCaps": [], "variants": [], "appliesTo": [ "charts/donut-chart", "media/image", "ui/text-block" ], "referenceImpl": "video-shotcraft demos/transition/circle-match-iris/ (CircleMatchIris.tsx)", "tags": [ "transition", "match-cut", "mask" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/circle-match-iris.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/circle-match-iris.md" } }, { "name": "recipe-transition/color-block-step-wipe", "axis": "transition", "title": "Colour block step wipe", "oneLiner": "Two or three flat colour blocks cross the frame in quick succession, each covering the last, and the final one lifts to reveal the next scene — the cut happens entirely inside the colour.", "whenToUse": "A hard section break in a brand-forward film, where the palette itself should do the punctuation; it also hides a change of layout, lighting or aspect that a normal wipe would expose.", "jobs": [ "bridge" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 24, "preHoldFrames": 24, "postHoldFrames": 30 }, "params": [ { "name": "blockCount", "typicalValue": "2-3 blocks, each 8-10f, overlapping by about half", "feelWhenWrong": "four or more turns a punctuation mark into a light show" }, { "name": "blockPalette", "typicalValue": "brand colours with clearly different values, darkest last", "feelWhenWrong": "same-value blocks read as one smear and the stepping is lost" }, { "name": "stepOffset", "typicalValue": "each block enters 4-5f after the previous one", "feelWhenWrong": "simultaneous entry is a single block with a gradient, not a step" }, { "name": "blockEasing", "typicalValue": "ease-out entering, ease-in leaving", "feelWhenWrong": "symmetric easing makes the blocks feel weightless" }, { "name": "sceneSwap", "typicalValue": "swap scenes on the frame the darkest block fully covers the frame", "feelWhenWrong": "swapping a frame early leaks a sliver of the incoming scene at the edge" } ], "pitfalls": [ "At least one frame must be fully covered, or the swap is visible — verify that frame rather than trusting the numbers.", "Fast large areas of saturated colour are a flash risk; keep the value swing moderate and never strobe.", "The direction of travel should match the film's other wipes; mixed directions read as different films spliced together." ], "usageCaps": [ { "scope": "film", "maxUses": 2, "note": "It hides a lot, which makes it tempting; a third use makes the palette stop meaning anything.", "variant": null } ], "variants": [ { "name": "center-step", "summary": "Blocks cross the frame horizontally through the centre, each covering the last, the final one lifting on the incoming scene.", "useWhen": "A straightforward section break in a horizontal-reading film." }, { "name": "corner-diagonal", "summary": "Blocks sweep from a corner on a diagonal, each rotated slightly off the last.", "useWhen": "A more aggressive break, or when the layout on both sides is strongly diagonal." } ], "appliesTo": [ "layout/flex-container", "ui/shape-layer", "ui/text-block" ], "referenceImpl": "video-shotcraft demos/transition/color-block-step-wipe/ (ColorBlockStepWipe.tsx)", "tags": [ "transition", "wipe", "brand" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/color-block-step-wipe.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/color-block-step-wipe.md", "derivedFrom": "Technique studied from a publicly posted Notion AI promo (1.5-3.5s and 26-27s) and re-implemented upstream from scratch with placeholder assets." } }, { "name": "recipe-transition/cube-navigation", "axis": "transition", "title": "Cube navigation", "oneLiner": "Scenes live on the faces of a cube; advancing rotates the cube 90° about one axis so the current face turns away and the next turns in, with the shaded side faces visible during the turn.", "whenToUse": "A sequence where the audience should be able to hold a mental map of where the sections sit relative to each other — a settings tour, a multi-surface product, an argument with a left-hand and a right-hand side.", "jobs": [ "orient", "exhibit" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 36, "preHoldFrames": 30, "postHoldFrames": 36 }, "params": [ { "name": "rotationDuration", "typicalValue": "36f per quarter turn, ease-in-out cubic", "feelWhenWrong": "under ~24f the audience cannot track which face went where, which is the whole point" }, { "name": "perspective", "typicalValue": "1400px against a cube edge equal to the frame width", "feelWhenWrong": "too little perspective flattens it into a folding card" }, { "name": "faceShading", "typicalValue": "side faces darkened 20-35% by their angle to the light", "feelWhenWrong": "unshaded faces make the cube read as flat panels hinging" }, { "name": "axisDiscipline", "typicalValue": "one axis per turn — horizontal for siblings, vertical for depth", "feelWhenWrong": "mixing axes in one turn loses the spatial map the recipe exists to build" }, { "name": "cornerRadius", "typicalValue": "0 on the cube faces", "feelWhenWrong": "rounded faces reveal the hollow interior at the seams mid-turn" } ], "pitfalls": [ "Only four faces are reachable on one axis; a fifth section means changing axis, which must be motivated by the content.", "Content must be full-bleed on each face — a margin shows the face edges and breaks the solid.", "Text at the outgoing edge is heavily foreshortened during the turn; keep copy away from the leading edge.", "Combining this with a camera move on the same beat makes the rotation direction ambiguous." ], "usageCaps": [], "variants": [], "appliesTo": [ "layout/flex-container", "browser/browser-panel", "scene3d/scene3d" ], "referenceImpl": "video-shotcraft demos/transition/cube-navigation/ (CubeNavigation.tsx)", "tags": [ "transition", "3d", "navigation" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/cube-navigation.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/cube-navigation.md", "derivedFrom": "Technique studied from the remotion-bits.dev example collection (https://remotion-bits.dev/) and re-implemented from scratch upstream; see the donor's references/shots/ATTRIBUTION.md." } }, { "name": "recipe-transition/gradient-transition", "axis": "transition", "title": "Gradient transition", "oneLiner": "A soft gradient front sweeps the frame, dissolving the outgoing scene inside its band and resolving the incoming one behind it — a dissolve with a direction.", "whenToUse": "A calm passage between two scenes that should not feel cut at all: an atmosphere change, a time passing, or the move into a quiet closing statement.", "jobs": [ "bridge" ], "energy": "calm", "durationBudget": { "fps": 30, "actionFrames": 45, "preHoldFrames": 30, "postHoldFrames": 45 }, "params": [ { "name": "bandWidth", "typicalValue": "35-50% of frame width", "feelWhenWrong": "a narrow band is a wipe with soft edges; a very wide one is an undirected crossfade" }, { "name": "sweepCurve", "typicalValue": "ease-in-out over ~45f", "feelWhenWrong": "any acceleration spike turns a calm move into a nervous one" }, { "name": "gradientStops", "typicalValue": "three stops, the middle one carrying a slight hue shift", "feelWhenWrong": "a pure luminance ramp reads as a fade to grey" }, { "name": "sceneMotion", "typicalValue": "both scenes drift about 2% in the sweep direction", "feelWhenWrong": "completely static scenes make the band look like a filter passing over a photo" }, { "name": "grain", "typicalValue": "a light animated grain across the band", "feelWhenWrong": "banding is very visible on flat gradients over large areas" } ], "pitfalls": [ "Energetic content on either side fights the transition; this is for calm-to-calm.", "On 8-bit output the gradient bands — grain or dither is not optional.", "It is slow by design, so it needs the schedule; trimming it below about a second makes it a mushy crossfade.", "Two gradient transitions back to back read as a technical fault rather than a rhythm." ], "usageCaps": [], "variants": [], "appliesTo": [ "media/image", "layout/flex-container", "ui/text-block" ], "referenceImpl": "video-shotcraft demos/transition/gradient-transition/ (GradientTransition.tsx)", "tags": [ "transition", "dissolve", "calm" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/gradient-transition.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/gradient-transition.md", "derivedFrom": "Technique studied from the remotion-bits.dev example collection (https://remotion-bits.dev/) and re-implemented from scratch upstream; see the donor's references/shots/ATTRIBUTION.md." } }, { "name": "recipe-transition/line-carry-transition", "axis": "transition", "title": "Line carry transition", "oneLiner": "A line element in the outgoing scene — an underline, a progress bar, a chart axis — detaches, travels across the frame, and becomes a structural line in the next scene, carrying the cut with it.", "whenToUse": "Two scenes joined by an argument rather than by a chapter break: the line is the thread of the sentence, and seeing it survive the cut tells the audience the second scene continues the first.", "jobs": [ "bridge", "prove" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 40, "preHoldFrames": 26, "postHoldFrames": 34 }, "params": [ { "name": "lineContinuity", "typicalValue": "the same stroke width, colour and cap survive the whole trip", "feelWhenWrong": "any change mid-flight breaks the identity and it becomes two different lines" }, { "name": "travelPath", "typicalValue": "a single eased path, at most one gentle curve", "feelWhenWrong": "a wandering path draws attention to the trick instead of the thread" }, { "name": "sceneHandoff", "typicalValue": "the outgoing scene fades in the last third, the incoming builds outward from the line", "feelWhenWrong": "cutting the scenes independently of the line abandons the carry" }, { "name": "lengthMorph", "typicalValue": "interpolate length and position together over ~40f", "feelWhenWrong": "morphing length after arrival reads as a second, unrelated animation" }, { "name": "arrivalRole", "typicalValue": "the line must land as something structural — an axis, a rule, a baseline", "feelWhenWrong": "landing as decoration wastes the setup" } ], "pitfalls": [ "The two scenes must genuinely have a compatible line; drawing one in specially is visible.", "Everything else in the outgoing scene has to clear the frame before the line lands, or the arrival is cluttered.", "The line is thin, so it needs contrast against both backgrounds along the whole path.", "Do not add a camera move underneath: two motions competing makes the carry hard to follow." ], "usageCaps": [], "variants": [], "appliesTo": [ "ui/progress-bar", "handdrawn/underline", "charts/line-chart" ], "referenceImpl": "video-shotcraft demos/transition/line-carry-transition/ (LineCarryTransition.tsx)", "tags": [ "transition", "match-cut", "continuity" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/line-carry-transition.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/line-carry-transition.md" } }, { "name": "recipe-transition/mosaic-reframe", "axis": "transition", "title": "Mosaic reframe", "oneLiner": "The frame breaks into a grid of tiles that fly apart on a staggered wave and reassemble as the next scene, each tile carrying its own slice of both images.", "whenToUse": "A jump between two visually rich scenes — a gallery, a set of screenshots, a change of subject — where a plain cut would feel abrupt and a dissolve would turn both into mud.", "jobs": [ "exhibit", "demonstrate" ], "energy": "measured", "durationBudget": { "fps": 30, "actionFrames": 42, "preHoldFrames": 28, "postHoldFrames": 34 }, "params": [ { "name": "gridDensity", "typicalValue": "4x3 to 6x4", "feelWhenWrong": "finer grids read as digital noise rather than as tiles; coarser reads as a few panels sliding" }, { "name": "tileStagger", "typicalValue": "diagonal, 2-3f per step", "feelWhenWrong": "row-by-row is a curtain; random is chaos — the diagonal keeps it legible" }, { "name": "tileTravel", "typicalValue": "each tile moves 15-25% of its own size and rotates under 8°", "feelWhenWrong": "large travel loses the reading of a single image coming apart" }, { "name": "depthPass", "typicalValue": "tiles scale 0.92-1.08 with a matching shadow", "feelWhenWrong": "flat tiles read as a jigsaw puzzle rather than a plane in motion" }, { "name": "seamGap", "typicalValue": "2-4px between tiles at full separation, closing to 0", "feelWhenWrong": "an unclosed gap on landing shows the assembly forever" } ], "pitfalls": [ "Text spanning tile boundaries is unreadable mid-transition; both scenes' copy should sit inside a tile where possible.", "The tile count multiplies the render cost — check the frame budget before scaling the grid up.", "The grid must divide the frame exactly, or the edge tiles are a different size and the wave stutters." ], "usageCaps": [ { "scope": "film", "maxUses": 1, "note": "A second mosaic reframe reads as a template; use something else.", "variant": null } ], "variants": [], "appliesTo": [ "media/image", "layout/flex-container", "scene3d/image-gallery" ], "referenceImpl": "video-shotcraft demos/transition/mosaic-reframe/ (MosaicReframe.tsx)", "tags": [ "transition", "grid", "gallery" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/mosaic-reframe.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/mosaic-reframe.md", "derivedFrom": "Technique studied from the remotion-bits.dev example collection (https://remotion-bits.dev/) and re-implemented from scratch upstream; see the donor's references/shots/ATTRIBUTION.md." } }, { "name": "recipe-transition/page-turn-transitions", "axis": "transition", "title": "Page turn transitions", "oneLiner": "Two paper-and-panel ways to change scene — a cube-style rotate where the frame turns as a solid, and a barn-door split where the outgoing scene parts down the middle onto the next.", "whenToUse": "A sequence with a physical metaphor already in play — a document, a deck, a set of doors — where the change of scene should be an object being operated rather than an edit.", "jobs": [ "bridge", "reveal" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 32, "preHoldFrames": 26, "postHoldFrames": 34 }, "params": [ { "name": "turnDuration", "typicalValue": "32f, ease-in-out with a small ease-out tail", "feelWhenWrong": "a symmetric curve makes the panel feel weightless" }, { "name": "splitOffset", "typicalValue": "the two halves part by the full half-width plus about 4%", "feelWhenWrong": "an exact half-width leaves a hairline of the outgoing scene at the edges" }, { "name": "edgeLighting", "typicalValue": "the leading edges brighten and the trailing ones fall into shadow", "feelWhenWrong": "without it the halves read as image rectangles, not as panels" }, { "name": "innerScale", "typicalValue": "the incoming scene rests at 0.94 and settles to 1.0", "feelWhenWrong": "a static inner scene makes the doors look painted onto a backdrop" }, { "name": "hingePerspective", "typicalValue": "1200px, hinge at the outer edges for the split, at one edge for the turn", "feelWhenWrong": "a centre hinge on the split turns the doors inside out" } ], "pitfalls": [ "The split runs down the centre line, so nothing critical can live there in either scene.", "The two variants imply different objects — a page and a pair of doors — and mixing them in one film muddles the metaphor.", "Both need full-bleed content on both sides; a margin exposes the panel edges.", "Stacking these on a camera move makes the hinge direction ambiguous." ], "usageCaps": [], "variants": [ { "name": "cube-rotate", "summary": "The frame rotates as a solid panel about one edge, the outgoing face turning away as the incoming one turns in.", "useWhen": "A sequential advance through peer scenes with a physical object metaphor." }, { "name": "barn-door-split", "summary": "The outgoing scene parts down the centre into two panels that swing outward, revealing the next scene behind.", "useWhen": "A reveal beat — opening onto something, rather than moving along." } ], "appliesTo": [ "documents/pdf-document", "layout/flex-container", "browser/browser-panel" ], "referenceImpl": "video-shotcraft demos/transition/page-turn-transitions/ (CubeRotate.tsx / BarnDoorSplit.tsx)", "tags": [ "transition", "3d", "physical" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/page-turn-transitions.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/page-turn-transitions.md" } }, { "name": "recipe-transition/white-flash-logo-simplify-cut", "axis": "transition", "title": "White flash logo simplify cut", "oneLiner": "A one-frame white flash at the peak of a build, and behind it the busy scene has been replaced by the logo alone on a clean field — the flash hides the removal of everything else.", "whenToUse": "The final beat of a film, or the end of a dense feature montage: the flash converts accumulated visual noise into a single mark, which is the closing statement the audience leaves with.", "jobs": [ "celebrate", "bridge" ], "energy": "energetic", "durationBudget": { "fps": 30, "actionFrames": 8, "preHoldFrames": 40, "postHoldFrames": 60 }, "params": [ { "name": "flashProfile", "typicalValue": "1-2f at full white, 5-7f falling off on an ease-out", "feelWhenWrong": "a slow rise announces the flash instead of hiding the change; a long hold is a blowout" }, { "name": "flashPeakFrame", "typicalValue": "exactly on the build's peak", "feelWhenWrong": "a flash one beat late reads as a mistake rather than as a punctuation" }, { "name": "logoRest", "typicalValue": "the logo enters at ~1.04 and settles to 1.0 over ~20f behind the falloff", "feelWhenWrong": "a logo that arrives already at rest looks pasted on" }, { "name": "fieldContrast", "typicalValue": "the post-flash field is either much lighter or much darker than the pre-flash scene", "feelWhenWrong": "a similar field makes the audience notice the elements that vanished" }, { "name": "audioAlignment", "typicalValue": "the flash lands on the beat if there is a track", "feelWhenWrong": "off-beat, the loudest visual move in the film has no support" } ], "pitfalls": [ "A full-frame white flash is an accessibility hazard: one flash only, never a sequence, and keep the falloff smooth.", "The flash only works if there is a build to peak; dropped onto a static scene it is just a blink.", "Nothing after the flash may reintroduce the removed elements — that undoes the simplification." ], "usageCaps": [ { "scope": "film", "maxUses": 1, "note": "Use it at the end; a flash in the middle spends the ending early.", "variant": null } ], "variants": [], "appliesTo": [ "ui/text-block", "fx-treatments/gloss", "fx-emphasis/glow" ], "referenceImpl": "video-shotcraft demos/transition/white-flash-logo-simplify-cut/ (WhiteFlashLogoSimplifyCut.tsx)", "tags": [ "transition", "flash", "ending" ], "attribution": { "sourceProject": "video-shotcraft", "author": "Vincentwei1021", "url": "https://github.com/Vincentwei1021/video-shotcraft/blob/main/references/shots/transition/white-flash-logo-simplify-cut.md", "license": "Apache-2.0", "sourcePath": "references/shots/transition/white-flash-logo-simplify-cut.md", "derivedFrom": "Technique studied from a Douyin concept edit by 观机社 (dy09) and re-implemented upstream from scratch; the brand wordmark is replaced with a neutral placeholder." } } ], "items": [ { "name": "browser-browser-panel", "type": "registry:block", "entry": "src/components/motionactor/browser/browserPanel/index.ts", "family": "browser", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate", "orient" ], "useWhen": "The product is a web app and needs a credible stage — chrome, tabs, an address bar — before anything inside it will read as real.", "avoidWhen": "The subject is not a web page; browser chrome around a native app or a bare visual makes the frame lie about what it is showing.", "pairsWith": [ "ui/cursor", "overlays/spotlight-overlay" ], "energy": "calm" }, "title": "Browser Panel", "description": "Browser Panel.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/remotion", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/browser" ], "controls": { "fields": [ { "path": "activeTabId", "groupName": null, "leafName": "activeTabId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 760, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1200, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "calendar-calendar", "type": "registry:block", "entry": "src/components/motionactor/calendar/calendar/index.ts", "family": "calendar", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "demonstrate" ], "useWhen": "Time is the subject — when things land, how a month fills up, the week that got reclaimed — and the viewer needs the grid to feel it.", "avoidWhen": "The dates are a detail rather than the point; a calendar invites the audience to read every cell instead of listening to the narration.", "pairsWith": [ "ui/toast", "overlays/callout" ], "energy": "calm" }, "title": "Calendar", "description": "Calendar.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "react" ], "registryDependencies": [], "exports": [ "@motionactor/calendar" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "card.borderRadius", "groupName": "card", "leafName": "borderRadius", "kind": "number", "defaultValue": 20, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.initialDate", "groupName": "content", "leafName": "initialDate", "kind": "object", "defaultValue": "2026-01-01T05:00:00.000Z", "editable": false, "isReactive": false }, { "path": "events", "groupName": null, "leafName": "events", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 760, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1100, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.easing", "groupName": "reveal", "leafName": "easing", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.elements", "groupName": "reveal", "leafName": "elements", "kind": "object", "editable": false, "isReactive": false }, { "path": "reveal.layers", "groupName": "reveal", "leafName": "layers", "kind": "object", "editable": false, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "editable": false, "isReactive": false }, { "path": "reveal.stagger", "groupName": "reveal", "leafName": "stagger", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.view", "groupName": "reveal", "leafName": "view", "kind": "string", "defaultValue": "month", "editable": true, "isReactive": false }, { "path": "reveal.viewFrom", "groupName": "reveal", "leafName": "viewFrom", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "reveal.viewProgress", "groupName": "reveal", "leafName": "viewProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "charts-bar-chart", "type": "registry:block", "entry": "src/components/motionactor/charts/barChart/index.ts", "family": "charts", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "prove", "compare" ], "useWhen": "A claim compares a handful of named things and the size of the gap is the argument — the audience has to see one bar out-run the others while the narrator says so.", "avoidWhen": "Only one figure matters, or there are more categories than a viewer can read in the seconds they get; a crowded bar chart is scanned rather than understood.", "pairsWith": [ "fx-emphasis/bar-shine", "handdrawn/callout-circle" ], "energy": "measured" }, "title": "Bar Chart", "description": "Bar Chart.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "d3-array", "d3-shape", "react" ], "registryDependencies": [], "exports": [ "@motionactor/charts" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "axis.maxValue", "groupName": "axis", "leafName": "maxValue", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.bars", "groupName": "content", "leafName": "bars", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "interaction.selectedBarId", "groupName": "interaction", "leafName": "selectedBarId", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "labels.showAxisLabels", "groupName": "labels", "leafName": "showAxisLabels", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 640, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.barColor", "groupName": "palette", "leafName": "barColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.labelColor", "groupName": "palette", "leafName": "labelColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.selectedColor", "groupName": "palette", "leafName": "selectedColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.unselectedOpacity", "groupName": "palette", "leafName": "unselectedOpacity", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.growProgress", "groupName": "reveal", "leafName": "growProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "charts-comparison-chart", "type": "registry:block", "entry": "src/components/motionactor/charts/comparisonChart/index.ts", "family": "charts", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "compare", "prove" ], "useWhen": "Two series have to be held against each other over the same span — before and after, ours and theirs — and the moment they diverge is the point being made.", "avoidWhen": "The two series barely differ; a divergence chart with no divergence quietly argues the opposite of whatever the narration is claiming.", "pairsWith": [ "handdrawn/callout-circle", "ui/text-block" ], "energy": "measured" }, "title": "Comparison Chart", "description": "Comparison Chart.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "d3-array", "d3-shape", "react" ], "registryDependencies": [], "exports": [ "@motionactor/charts" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "callout.comparisonLabel", "groupName": "callout", "leafName": "comparisonLabel", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "callout.comparisonProgress", "groupName": "callout", "leafName": "comparisonProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "callout.primaryLabel", "groupName": "callout", "leafName": "primaryLabel", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "callout.primaryProgress", "groupName": "callout", "leafName": "primaryProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.comparisonPoints", "groupName": "content", "leafName": "comparisonPoints", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.mode", "groupName": "content", "leafName": "mode", "kind": "string", "defaultValue": "line", "editable": true, "isReactive": false }, { "path": "content.points", "groupName": "content", "leafName": "points", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "interaction.focusProgress", "groupName": "interaction", "leafName": "focusProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "interaction.selectedPointIndex", "groupName": "interaction", "leafName": "selectedPointIndex", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 640, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.areaColor", "groupName": "palette", "leafName": "areaColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.comparisonColor", "groupName": "palette", "leafName": "comparisonColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.lineColor", "groupName": "palette", "leafName": "lineColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.markerColor", "groupName": "palette", "leafName": "markerColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.highlightedLabelIndex", "groupName": "reveal", "leafName": "highlightedLabelIndex", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "reveal.labelHighlightProgress", "groupName": "reveal", "leafName": "labelHighlightProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.traceProgress", "groupName": "reveal", "leafName": "traceProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "revealedSeries", "groupName": null, "leafName": "revealedSeries", "kind": "object", "editable": false, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "threshold.y0", "groupName": "threshold", "leafName": "y0", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "threshold.y1", "groupName": "threshold", "leafName": "y1", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "charts-donut-chart", "type": "registry:block", "entry": "src/components/motionactor/charts/donutChart/index.ts", "family": "charts", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "prove" ], "useWhen": "The story is share of a whole — what fraction of the market, the budget, the working day — and one slice has to read as the answer.", "avoidWhen": "There are more than a few slices, or the values sit close together; a donut is the worst chart for fine comparison and charts/bar-chart carries the same data honestly.", "pairsWith": [ "ui/text-block" ], "energy": "calm" }, "title": "Donut Chart", "description": "Donut Chart.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "d3-array", "d3-shape", "react" ], "registryDependencies": [], "exports": [ "@motionactor/charts" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.segments", "groupName": "content", "leafName": "segments", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "geometry.innerRadiusRatio", "groupName": "geometry", "leafName": "innerRadiusRatio", "kind": "number", "defaultValue": 0.55, "editable": true, "isReactive": false }, { "path": "geometry.outerRadiusRatio", "groupName": "geometry", "leafName": "outerRadiusRatio", "kind": "number", "defaultValue": 0.85, "editable": true, "isReactive": false }, { "path": "geometry.startAngle", "groupName": "geometry", "leafName": "startAngle", "kind": "number", "defaultValue": -1.5707963267948966, "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.defaultColor", "groupName": "palette", "leafName": "defaultColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.labelColor", "groupName": "palette", "leafName": "labelColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.trackColor", "groupName": "palette", "leafName": "trackColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.labelFontSize", "groupName": "typography", "leafName": "labelFontSize", "kind": "number", "defaultValue": 12, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "charts-line-chart", "type": "registry:block", "entry": "src/components/motionactor/charts/lineChart/index.ts", "family": "charts", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "prove" ], "useWhen": "Something changed over time and the shape of the change — the climb, the drop, the plateau — is exactly what the narration is describing.", "avoidWhen": "The x axis is categories rather than time; joining unrelated categories with a line invents a trend that does not exist.", "pairsWith": [ "fx-emphasis/path-trace", "charts/comparison-chart" ], "energy": "measured" }, "title": "Line Chart", "description": "Line Chart.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "d3-array", "d3-shape", "react" ], "registryDependencies": [], "exports": [ "@motionactor/charts" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.comparisonPoints", "groupName": "content", "leafName": "comparisonPoints", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.mode", "groupName": "content", "leafName": "mode", "kind": "string", "defaultValue": "line", "editable": true, "isReactive": false }, { "path": "content.points", "groupName": "content", "leafName": "points", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "interaction.focusProgress", "groupName": "interaction", "leafName": "focusProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "interaction.selectedPointIndex", "groupName": "interaction", "leafName": "selectedPointIndex", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 640, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.areaColor", "groupName": "palette", "leafName": "areaColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.comparisonColor", "groupName": "palette", "leafName": "comparisonColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.lineColor", "groupName": "palette", "leafName": "lineColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.markerColor", "groupName": "palette", "leafName": "markerColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.highlightedLabelIndex", "groupName": "reveal", "leafName": "highlightedLabelIndex", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "reveal.labelHighlightProgress", "groupName": "reveal", "leafName": "labelHighlightProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.traceProgress", "groupName": "reveal", "leafName": "traceProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "revealedSeries", "groupName": null, "leafName": "revealedSeries", "kind": "object", "editable": false, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "threshold.y0", "groupName": "threshold", "leafName": "y0", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "threshold.y1", "groupName": "threshold", "leafName": "y1", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "charts-scatter-plot", "type": "registry:block", "entry": "src/components/motionactor/charts/scatterPlot/index.ts", "family": "charts", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "prove", "compare" ], "useWhen": "The claim is about a relationship or a spread across a population — the more of X the more of Y, or look how far this one sits from the pack.", "avoidWhen": "There are only a handful of points, or the audience is being asked to read exact values; a scatter reads as a shape, never as a table.", "pairsWith": [ "fx-emphasis/glow", "overlays/callout" ], "energy": "calm" }, "title": "Scatter Plot", "description": "Scatter Plot.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "d3-array", "d3-shape", "react" ], "registryDependencies": [], "exports": [ "@motionactor/charts" ], "controls": { "fields": [ { "path": "appearance.defaultRadius", "groupName": "appearance", "leafName": "defaultRadius", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false }, { "path": "appearance.labelsVisible", "groupName": "appearance", "leafName": "labelsVisible", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "appearance.referenceLabel", "groupName": "appearance", "leafName": "referenceLabel", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "appearance.referenceY", "groupName": "appearance", "leafName": "referenceY", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.points", "groupName": "content", "leafName": "points", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.xLabel", "groupName": "content", "leafName": "xLabel", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "content.yLabel", "groupName": "content", "leafName": "yLabel", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "interaction.selectedPointId", "groupName": "interaction", "leafName": "selectedPointId", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 480, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 640, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.defaultColor", "groupName": "palette", "leafName": "defaultColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.labelColor", "groupName": "palette", "leafName": "labelColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.selectedColor", "groupName": "palette", "leafName": "selectedColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.unselectedOpacity", "groupName": "palette", "leafName": "unselectedOpacity", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.labelProgress", "groupName": "reveal", "leafName": "labelProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "charts-stacked-bar", "type": "registry:block", "entry": "src/components/motionactor/charts/stackedBar/index.ts", "family": "charts", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "compare", "prove" ], "useWhen": "What matters is how a total is composed and how that composition shifts between categories or periods, rather than the total itself.", "avoidWhen": "The audience must compare the middle bands: only the bottom segment shares a baseline, so everything stacked above it becomes guesswork.", "pairsWith": [ "charts/bar-chart" ], "energy": "measured" }, "title": "Stacked Bar", "description": "Stacked Bar.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "d3-array", "d3-shape", "react" ], "registryDependencies": [], "exports": [ "@motionactor/charts" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.bars", "groupName": "content", "leafName": "bars", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "interaction.selectedBarId", "groupName": "interaction", "leafName": "selectedBarId", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "labels.showAxisLabels", "groupName": "labels", "leafName": "showAxisLabels", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 640, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.labelColor", "groupName": "palette", "leafName": "labelColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.seriesColors", "groupName": "palette", "leafName": "seriesColors", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.unselectedOpacity", "groupName": "palette", "leafName": "unselectedOpacity", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.growProgress", "groupName": "reveal", "leafName": "growProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "code-code-display", "type": "registry:block", "entry": "src/components/motionactor/code/codeDisplay/index.ts", "family": "code", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate", "prove" ], "useWhen": "Finished code is the evidence — the config that fixes it, the three lines that do the work — and the viewer needs to read it rather than watch it being written.", "avoidWhen": "The act of writing is the story; a static block skips the part the audience came for, which is what code/code-editor exists to show.", "pairsWith": [ "code/terminal", "fx-emphasis/glow" ], "energy": "calm" }, "title": "Code Display", "description": "Code Display.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "codehike", "react" ], "registryDependencies": [], "exports": [ "@motionactor/code" ], "controls": { "fields": [ { "path": "activeSnippet", "groupName": null, "leafName": "activeSnippet", "kind": "json", "editable": false, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.activeSnippetId", "groupName": "content", "leafName": "activeSnippetId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.caption", "groupName": "content", "leafName": "caption", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.nextSnippetId", "groupName": "content", "leafName": "nextSnippetId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.snippets", "groupName": "content", "leafName": "snippets", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "lineCount", "groupName": null, "leafName": "lineCount", "kind": "number", "editable": false, "isReactive": false }, { "path": "nextSnippet", "groupName": null, "leafName": "nextSnippet", "kind": "json", "editable": false, "isReactive": false }, { "path": "reveal.focusEndLine", "groupName": "reveal", "leafName": "focusEndLine", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "reveal.focusOpacity", "groupName": "reveal", "leafName": "focusOpacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.focusStartLine", "groupName": "reveal", "leafName": "focusStartLine", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "reveal.transitionProgress", "groupName": "reveal", "leafName": "transitionProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "surface.background", "groupName": "surface", "leafName": "background", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "surface.borderRadius", "groupName": "surface", "leafName": "borderRadius", "kind": "number", "defaultValue": 18, "editable": true, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "midnight", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "code-code-editor", "type": "registry:block", "entry": "src/components/motionactor/code/codeEditor/index.ts", "family": "code", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate" ], "useWhen": "The narration walks through building something and the typing itself carries the beat — the caret, the selection, the tab switched to mid-thought.", "avoidWhen": "The snippet is long or only the result matters; watching a hundred characters type out is dead air that code/code-display would have skipped.", "pairsWith": [ "code/terminal", "code/file-tree", "ui/cursor" ], "energy": "measured" }, "title": "Code Editor", "description": "Code Editor.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/code" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "caret.col", "groupName": "caret", "leafName": "col", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "caret.line", "groupName": "caret", "leafName": "line", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "caret.visible", "groupName": "caret", "leafName": "visible", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "caretBlink", "groupName": null, "leafName": "caretBlink", "kind": "number", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.activeTab", "groupName": "content", "leafName": "activeTab", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "content.filename", "groupName": "content", "leafName": "filename", "kind": "string", "defaultValue": "index.ts", "editable": true, "isReactive": false }, { "path": "content.language", "groupName": "content", "leafName": "language", "kind": "string", "defaultValue": "typescript", "editable": true, "isReactive": false }, { "path": "content.showMinimap", "groupName": "content", "leafName": "showMinimap", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "content.tabs", "groupName": "content", "leafName": "tabs", "kind": "array", "defaultValue": [ "index.ts" ], "editable": false, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "lines", "groupName": null, "leafName": "lines", "kind": "array", "editable": false, "isReactive": false }, { "path": "reveal.highlightedLine", "groupName": "reveal", "leafName": "highlightedLine", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "reveal.highlightOpacity", "groupName": "reveal", "leafName": "highlightOpacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.scrollOffset", "groupName": "reveal", "leafName": "scrollOffset", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "selection.endCol", "groupName": "selection", "leafName": "endCol", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "selection.endLine", "groupName": "selection", "leafName": "endLine", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "selection.startCol", "groupName": "selection", "leafName": "startCol", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "selection.startLine", "groupName": "selection", "leafName": "startLine", "kind": "number", "defaultValue": -1, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "surface.background", "groupName": "surface", "leafName": "background", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "surface.borderRadius", "groupName": "surface", "leafName": "borderRadius", "kind": "number", "defaultValue": 16, "editable": true, "isReactive": false }, { "path": "tabs", "groupName": null, "leafName": "tabs", "kind": "array", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "midnight", "editable": true, "isReactive": false }, { "path": "tokenLines", "groupName": null, "leafName": "tokenLines", "kind": "array", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "code-file-tree", "type": "registry:block", "entry": "src/components/motionactor/code/fileTree/index.ts", "family": "code", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "demonstrate" ], "useWhen": "The viewer has to know where in a project they are standing before any of the code means anything — this lives here, next to that.", "avoidWhen": "Only one file is ever discussed; a tree drawn to locate a single file is scenery, and an editor's own tab strip already said it.", "pairsWith": [ "code/code-editor", "code/code-display" ], "energy": "calm" }, "title": "File Tree", "description": "File Tree.", "dependencies": [ "@motionactor/core", "@motionactor/remotion", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/code" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.title", "groupName": "content", "leafName": "title", "kind": "string", "defaultValue": "motionactor", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "focus", "groupName": null, "leafName": "focus", "kind": "array", "defaultValue": [ { "weight": 0 }, { "weight": 0 }, { "weight": 0 }, { "weight": 0 }, { "weight": 0 }, { "weight": 0 }, { "weight": 0 }, { "weight": 0 } ], "editable": false, "isReactive": true }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "nodes", "groupName": null, "leafName": "nodes", "kind": "array", "defaultValue": [ { "name": "src/", "kind": "folder", "depth": 0, "parentFolder": "", "marker": "" }, { "name": "actors/", "kind": "folder", "depth": 1, "parentFolder": "src", "marker": "" }, { "name": "terminal.ts", "kind": "file", "depth": 2, "parentFolder": "actors", "marker": "" }, { "name": "browser.ts", "kind": "file", "depth": 2, "parentFolder": "actors", "marker": "" }, { "name": "runtime/", "kind": "folder", "depth": 1, "parentFolder": "src", "marker": "" }, { "name": "scene.ts", "kind": "file", "depth": 2, "parentFolder": "runtime", "marker": "" }, { "name": "effect.ts", "kind": "file", "depth": 2, "parentFolder": "runtime", "marker": "" }, { "name": "README.md", "kind": "file", "depth": 0, "parentFolder": "", "marker": "" } ], "editable": false, "isReactive": false }, { "path": "palette.iconTheme", "groupName": "palette", "leafName": "iconTheme", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "resolvedIcons", "groupName": null, "leafName": "resolvedIcons", "kind": "array", "editable": false, "isReactive": false }, { "path": "rows", "groupName": null, "leafName": "rows", "kind": "array", "editable": false, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "ide", "editable": true, "isReactive": false }, { "path": "status", "groupName": null, "leafName": "status", "kind": "string", "defaultValue": "idle", "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "code-terminal", "type": "registry:block", "entry": "src/components/motionactor/code/terminal/index.ts", "family": "code", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate", "prove" ], "useWhen": "A command and its output are the proof — the install that succeeds, the suite that goes green, the error the next scene fixes.", "avoidWhen": "The output is long or invented; a wall of fabricated log lines is the fastest way to lose a technical audience entirely.", "pairsWith": [ "code/code-editor", "ui/toast" ], "energy": "measured" }, "title": "Terminal", "description": "Terminal.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/code" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "caret.visible", "groupName": "caret", "leafName": "visible", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "caretBlink", "groupName": null, "leafName": "caretBlink", "kind": "number", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.lines", "groupName": "content", "leafName": "lines", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.maxLines", "groupName": "content", "leafName": "maxLines", "kind": "number", "defaultValue": 80, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "midnight", "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "title", "groupName": null, "leafName": "title", "kind": "string", "defaultValue": "zsh — actor-runtime", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "desktop-desktop", "type": "registry:block", "entry": "src/components/motionactor/desktop/desktop/index.ts", "family": "desktop", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate", "orient" ], "useWhen": "The story spans more than one window — dragging between apps, a dock icon answering, the desktop as the place where the work happens.", "avoidWhen": "Only one surface matters; a whole desktop around a single window buries the subject in furniture that browser/browser-panel would have left out.", "pairsWith": [ "ui/cursor", "media/image" ], "energy": "measured" }, "title": "Desktop", "description": "Desktop.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/primitives", "@motionactor/remotion", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/desktop" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "cursorScale", "groupName": null, "leafName": "cursorScale", "kind": "number", "editable": false, "isReactive": false }, { "path": "dock.highlights", "groupName": "dock", "leafName": "highlights", "kind": "object", "defaultValue": {}, "editable": false, "isReactive": false }, { "path": "dock.items", "groupName": "dock", "leafName": "items", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "dock.position", "groupName": "dock", "leafName": "position", "kind": "string", "defaultValue": "bottom", "editable": true, "isReactive": false }, { "path": "dockIconCenters", "groupName": null, "leafName": "dockIconCenters", "kind": "object", "editable": false, "isReactive": false }, { "path": "dockMetrics", "groupName": null, "leafName": "dockMetrics", "kind": "object", "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "focusedWindowId", "groupName": null, "leafName": "focusedWindowId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "mouse.clickProgress", "groupName": "mouse", "leafName": "clickProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "mouse.visible", "groupName": "mouse", "leafName": "visible", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "mouse.x", "groupName": "mouse", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "mouse.y", "groupName": "mouse", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "aqua", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "wallpaper", "groupName": null, "leafName": "wallpaper", "kind": "object", "defaultValue": { "type": "gradient", "value": "linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%)" }, "editable": false, "isReactive": false }, { "path": "windows", "groupName": null, "leafName": "windows", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "windowVisuals", "groupName": null, "leafName": "windowVisuals", "kind": "array", "editable": false, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "diagrams-decision-flow", "type": "registry:block", "entry": "src/components/motionactor/diagrams/decisionFlow/index.ts", "family": "diagrams", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "demonstrate" ], "useWhen": "A process branches and the branching is the explanation — if this then that — and the viewer should be able to trace the path being described.", "avoidWhen": "The steps are strictly linear; a flow chart of a straight line adds boxes without adding understanding, and a timeline reads better.", "pairsWith": [ "fx-emphasis/path-trace", "handdrawn/arrow" ], "energy": "measured" }, "title": "Decision Flow", "description": "Decision Flow.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@remotion/paths", "react" ], "registryDependencies": [], "exports": [ "@motionactor/diagrams" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.cells", "groupName": "content", "leafName": "cells", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.criteria", "groupName": "content", "leafName": "criteria", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.graph", "groupName": "content", "leafName": "graph", "kind": "object", "defaultValue": { "rootId": "", "nodes": [], "edges": [] }, "editable": false, "isReactive": false }, { "path": "content.options", "groupName": "content", "leafName": "options", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.treePresentation", "groupName": "content", "leafName": "treePresentation", "kind": "object", "defaultValue": { "revealedDepth": 0, "activePathProgress": 0 }, "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "focus.activeOptionId", "groupName": "focus", "leafName": "activeOptionId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "focus.activePathNodeIds", "groupName": "focus", "leafName": "activePathNodeIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "focus.activeQuestionId", "groupName": "focus", "leafName": "activeQuestionId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "focus.compareOptionIds", "groupName": "focus", "leafName": "compareOptionIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "focus.highlightedCriterionId", "groupName": "focus", "leafName": "highlightedCriterionId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "focus.recommendedOptionIds", "groupName": "focus", "leafName": "recommendedOptionIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.easing", "groupName": "reveal", "leafName": "easing", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.elements", "groupName": "reveal", "leafName": "elements", "kind": "object", "editable": false, "isReactive": false }, { "path": "reveal.layers", "groupName": "reveal", "leafName": "layers", "kind": "object", "editable": false, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "editable": false, "isReactive": false }, { "path": "reveal.stagger", "groupName": "reveal", "leafName": "stagger", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.view", "groupName": "reveal", "leafName": "view", "kind": "string", "defaultValue": "tree", "editable": true, "isReactive": false }, { "path": "reveal.viewFrom", "groupName": "reveal", "leafName": "viewFrom", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "reveal.viewProgress", "groupName": "reveal", "leafName": "viewProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "surface.borderRadius", "groupName": "surface", "leafName": "borderRadius", "kind": "number", "defaultValue": 24, "editable": true, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.subtitle", "groupName": "typography", "leafName": "subtitle", "kind": "string", "defaultValue": "Guided recommendation with tree and comparison views", "editable": true, "isReactive": false }, { "path": "typography.title", "groupName": "typography", "leafName": "title", "kind": "string", "defaultValue": "Tech Stack Decision", "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "diagrams-network-graph", "type": "registry:block", "entry": "src/components/motionactor/diagrams/networkGraph/index.ts", "family": "diagrams", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "exhibit" ], "useWhen": "The point is that many things are connected — services calling services, people linked to people — and the shape of the mesh is the argument.", "avoidWhen": "The relationships are hierarchical or few; a graph turns a simple tree into a hairball that code/file-tree would have drawn plainly.", "pairsWith": [ "fx-emphasis/path-trace", "overlays/callout" ], "energy": "measured" }, "title": "Network Graph", "description": "Network Graph.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/diagrams" ], "controls": { "fields": [ { "path": "activePath", "groupName": null, "leafName": "activePath", "kind": "object", "editable": false, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.edges", "groupName": "content", "leafName": "edges", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.nodes", "groupName": "content", "leafName": "nodes", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.accent", "groupName": "palette", "leafName": "accent", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.edge", "groupName": "palette", "leafName": "edge", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.node", "groupName": "palette", "leafName": "node", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.surface", "groupName": "palette", "leafName": "surface", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.activePathNodeIds", "groupName": "reveal", "leafName": "activePathNodeIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "reveal.activePathProgress", "groupName": "reveal", "leafName": "activePathProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.focusedNode", "groupName": "reveal", "leafName": "focusedNode", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "reveal.pulseNode", "groupName": "reveal", "leafName": "pulseNode", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "reveal.pulseProgress", "groupName": "reveal", "leafName": "pulseProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "surface.borderRadius", "groupName": "surface", "leafName": "borderRadius", "kind": "number", "defaultValue": 16, "editable": true, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "view.panX", "groupName": "view", "leafName": "panX", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "view.panY", "groupName": "view", "leafName": "panY", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "view.zoom", "groupName": "view", "leafName": "zoom", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "diagrams-state-machine-actor", "type": "registry:block", "entry": "src/components/motionactor/diagrams/stateMachineActor/index.ts", "family": "diagrams", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate", "orient" ], "useWhen": "A system moves between named states and the transitions are what is being taught — idle to running to failed, and what triggers each hop.", "avoidWhen": "The audience is not technical; a state chart asks them to hold a formal model in their head while the narration keeps moving.", "pairsWith": [ "code/terminal", "fx-emphasis/glow" ], "energy": "measured" }, "title": "State Machine Actor", "description": "State Machine Actor.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "elkjs", "react", "xstate" ], "registryDependencies": [], "exports": [ "@motionactor/diagrams" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.graph", "groupName": "content", "leafName": "graph", "kind": "object", "defaultValue": { "id": "", "label": "", "nodes": [], "edges": [], "layout": { "x": 0, "y": 0, "width": 0, "height": 0 } }, "editable": false, "isReactive": false }, { "path": "content.nodeStates", "groupName": "content", "leafName": "nodeStates", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "content.snapshot", "groupName": "content", "leafName": "snapshot", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "logic", "groupName": null, "leafName": "logic", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.accent", "groupName": "palette", "leafName": "accent", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.nodeFill", "groupName": "palette", "leafName": "nodeFill", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.surface", "groupName": "palette", "leafName": "surface", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.activeNodeIds", "groupName": "reveal", "leafName": "activeNodeIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "reveal.activeTransitionIds", "groupName": "reveal", "leafName": "activeTransitionIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "reveal.edgeProgress", "groupName": "reveal", "leafName": "edgeProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "reveal.enteredNodeIds", "groupName": "reveal", "leafName": "enteredNodeIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "reveal.exitedNodeIds", "groupName": "reveal", "leafName": "exitedNodeIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "reveal.lastEventType", "groupName": "reveal", "leafName": "lastEventType", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "reveal.transitionProgress", "groupName": "reveal", "leafName": "transitionProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "diagrams-venn-diagram", "type": "registry:block", "entry": "src/components/motionactor/diagrams/vennDiagram/index.ts", "family": "diagrams", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "compare", "orient" ], "useWhen": "Two or three sets overlap and the overlap is the idea — what the categories share, and the thing that sits in the middle of them.", "avoidWhen": "The sets do not really intersect, or there are four of them; a Venn drawn for rhetoric rather than for sets is immediately obvious.", "pairsWith": [ "handdrawn/callout-circle", "ui/text-block" ], "energy": "calm" }, "title": "Venn Diagram", "description": "Venn Diagram.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/diagrams" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.circles", "groupName": "content", "leafName": "circles", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "content.items", "groupName": "content", "leafName": "items", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "content.selectedItemId", "groupName": "content", "leafName": "selectedItemId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "surface.blendMode", "groupName": "surface", "leafName": "blendMode", "kind": "string", "defaultValue": "multiply", "editable": true, "isReactive": false }, { "path": "surface.fillOpacity", "groupName": "surface", "leafName": "fillOpacity", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "surface.strokeColor", "groupName": "surface", "leafName": "strokeColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "surface.strokeWidth", "groupName": "surface", "leafName": "strokeWidth", "kind": "number", "defaultValue": 2, "editable": true, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "documents-pdf-document", "type": "registry:block", "entry": "src/components/motionactor/documents/pdfDocument/index.ts", "family": "documents", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "prove", "exhibit" ], "useWhen": "The source has to be shown rather than summarised — the contract, the paper, the invoice — with the page turned and the passage found on camera.", "avoidWhen": "A single sentence of the document matters; pull the quote into ui/text-block instead of asking anyone to read a page at video resolution.", "pairsWith": [ "overlays/spotlight-overlay", "fx-treatments/magnifier" ], "energy": "calm" }, "title": "Pdf Document", "description": "Pdf Document.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/overlays", "@motionactor/primitives", "@motionactor/renderers", "react", "react-pdf" ], "registryDependencies": [], "exports": [ "@motionactor/documents" ], "controls": { "fields": [ { "path": "annotations", "groupName": null, "leafName": "annotations", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.src", "groupName": "content", "leafName": "src", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "focus.blurAmount", "groupName": "focus", "leafName": "blurAmount", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "focus.feather", "groupName": "focus", "leafName": "feather", "kind": "number", "defaultValue": 14, "editable": true, "isReactive": false }, { "path": "focus.opacity", "groupName": "focus", "leafName": "opacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "scroll.offsetY", "groupName": "scroll", "leafName": "offsetY", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "scroll.pageGap", "groupName": "scroll", "leafName": "pageGap", "kind": "number", "defaultValue": 24, "editable": true, "isReactive": false }, { "path": "surface.background", "groupName": "surface", "leafName": "background", "kind": "color", "defaultValue": "#0b1120", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "view.mode", "groupName": "view", "leafName": "mode", "kind": "string", "defaultValue": "document", "editable": true, "isReactive": false }, { "path": "view.pageNumber", "groupName": "view", "leafName": "pageNumber", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "view.pageShadow", "groupName": "view", "leafName": "pageShadow", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "zoom.value", "groupName": "zoom", "leafName": "value", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [ { "name": "page", "contract": { "dataKind": "pdfPage", "geometry": "rect", "args": [ { "name": "pageNumber", "kind": "number" } ] } }, { "name": "text", "contract": { "dataKind": "pdfText", "geometry": "rect", "args": [ { "name": "selector", "kind": "json" } ] } } ] } }, { "name": "fx-emphasis-article-highlight", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/articleHighlight/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "emphasis", "highlight", "text" ], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "A sentence inside a page of text is the one being read aloud, and the page should dim around it as the marker passes.", "avoidWhen": "The page is short enough to read whole; highlighting the only paragraph on screen emphasises nothing.", "pairsWith": [ "documents/pdf-document", "ui/text-block" ], "energy": "measured" }, "title": "Article Highlight", "description": "Marker-pen highlight over a run of text, dimming the surrounding page.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "color", "kind": "color", "defaultValue": "#ffeb5a" }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "vignette", "kind": "number", "defaultValue": 0.13 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "articleHighlight", "application": "explicitTarget", "targetContract": { "dataKinds": [ "textRange", "pdfText" ], "geometry": [ "rect" ] } } ] } }, { "name": "fx-emphasis-bar-shine", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/barShine/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "chart", "emphasis", "highlight" ], "related": [], "intent": { "jobs": [ "emphasize", "celebrate" ], "useWhen": "One bar in a built chart is the number worth celebrating, and a specular pass along it says so without adding a label.", "avoidWhen": "The chart is the argument and every bar matters; shine on one is an editorial claim about which datum wins.", "pairsWith": [ "charts/bar-chart", "charts/stacked-bar" ], "energy": "measured" }, "title": "Bar Shine", "description": "Specular band travelling along one bar of a chart.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 1 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "speed", "kind": "number", "defaultValue": 0.85 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "barShine", "application": "explicitTarget", "targetContract": { "dataKinds": [ "barRegion" ], "geometry": [ "rect", "quad" ] } } ] } }, { "name": "fx-emphasis-chromatic-split", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/chromaticSplit/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "chromatic", "emphasis", "glitch" ], "related": [], "intent": { "jobs": [ "agitate", "emphasize" ], "useWhen": "Something is wrong but not violently so — a held signal error under a claim about corruption, drift or bad data.", "avoidWhen": "The frame carries text the audience must read; separated channels make type illegible for as long as the effect holds.", "pairsWith": [ "fx-emphasis/glitch", "fx-treatments/scanline" ], "energy": "energetic" }, "title": "Chromatic Split", "description": "Separates the colour channels for signal error that holds still.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "strength", "kind": "number", "defaultValue": 3.6 } ], "bindings": [ { "rendererId": "dom", "handlerId": "chromaticSplit", "application": "actor" } ] } }, { "name": "fx-emphasis-edge-glow", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/edgeGlow/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "emphasis", "focus", "outline" ], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "One panel among several is selected or focused, and the rim should light the way an interface lights the thing you picked.", "avoidWhen": "Everything on screen gets one; a frame of glowing edges is a frame with no focus at all.", "pairsWith": [ "overlays/spotlight-overlay", "ui/cursor" ], "energy": "calm" }, "title": "Edge Glow", "description": "Crisp lit rim following the actor's corner radius, for selection and focus.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "color", "kind": "color", "defaultValue": "#66e3ff" }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "width", "kind": "number", "defaultValue": 3 } ], "bindings": [ { "rendererId": "dom", "handlerId": "edgeGlow", "application": "actor" } ] } }, { "name": "fx-emphasis-glitch", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/glitch/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "emphasis", "glitch", "seeded" ], "related": [], "intent": { "jobs": [ "agitate" ], "useWhen": "The beat is interference or instability — the moment the system fails, the thing that should not be happening.", "avoidWhen": "The scene is calm or premium; digital corruption reads as noise against a quiet grade and dates the film fast.", "pairsWith": [ "fx-emphasis/noise-flicker", "fx-emphasis/shake" ], "energy": "frantic" }, "title": "Glitch", "description": "Digital corruption on the composited box, for interference and instability beats.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 0.95 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "dom", "handlerId": "glitch", "application": "actor" } ] } }, { "name": "fx-emphasis-glow", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/glow/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "attention", "emphasis", "light" ], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "One element must be the single thing the eye goes to, marked with light rather than motion so it can hold under narration.", "avoidWhen": "The subject is already isolated; a bloom on a lone element against a dark frame only softens its edges.", "pairsWith": [ "overlays/spotlight-overlay", "fx-emphasis/edge-glow" ], "energy": "calm" }, "title": "Glow", "description": "Soft coloured bloom around the actor, for marking the one element to look at.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "color", "kind": "color", "defaultValue": "#22d3ee" }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "spread", "kind": "number", "defaultValue": 24 } ], "bindings": [ { "rendererId": "dom", "handlerId": "glow", "application": "actor" } ] } }, { "name": "fx-emphasis-noise-flicker", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/noiseFlicker/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "emphasis", "flicker", "seeded" ], "related": [], "intent": { "jobs": [ "agitate" ], "useWhen": "Something is unreliable — a degraded feed, a failing sensor, a connection that keeps dropping while the narration describes it.", "avoidWhen": "The element carries information; flicker over data reads as a rendering fault rather than as a deliberate state.", "pairsWith": [ "fx-emphasis/glitch", "fx-treatments/scanline" ], "energy": "energetic" }, "title": "Noise Flicker", "description": "Seeded brightness flicker for unreliable and degraded states.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 0.24 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "speed", "kind": "number", "defaultValue": 1.5 } ], "bindings": [ { "rendererId": "dom", "handlerId": "noiseFlicker", "application": "actor" } ] } }, { "name": "fx-emphasis-path-trace", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/pathTrace/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "draw-on", "emphasis", "path" ], "related": [], "intent": { "jobs": [ "demonstrate", "reveal" ], "useWhen": "A route has to be followed on camera — a request crossing a diagram, a journey across a map — drawn at the pace it is explained.", "avoidWhen": "The path is already visible and static; tracing a line the viewer has been staring at adds time without adding meaning.", "pairsWith": [ "diagrams/network-graph", "diagrams/decision-flow" ], "energy": "measured" }, "title": "Path Trace", "description": "Draws a glowing stroke along a target path so a route appears to be traced.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 1 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "strokeWidth", "kind": "number", "defaultValue": 3.5 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "pathTrace", "application": "explicitTarget", "targetContract": { "dataKinds": [ "svgPath" ], "geometry": [ "path" ] } } ] } }, { "name": "fx-emphasis-pulse", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/pulse/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "attention", "emphasis", "loop" ], "related": [], "intent": { "jobs": [ "ask", "emphasize" ], "useWhen": "The frame is waiting on the viewer — the button they should press, the field they should fill — and the swell should keep asking.", "avoidWhen": "The moment has already resolved; a pulse that outlives its question becomes a nervous tic in the corner of the frame.", "pairsWith": [ "ui/cursor", "fx-emphasis/glow" ], "energy": "measured" }, "title": "Pulse", "description": "Rhythmic swell that keeps asking for attention without ever finishing.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 0.34 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "dom", "handlerId": "pulse", "application": "actor" } ] } }, { "name": "fx-emphasis-shake", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/shake/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "emphasis", "impact", "seeded" ], "related": [], "intent": { "jobs": [ "agitate", "emphasize" ], "useWhen": "Impact or refusal — the thing lands hard, or the system says no and the element rejects the input physically.", "avoidWhen": "It fires more than once in a scene; repeated shake stops reading as a reaction and starts reading as a broken loop.", "pairsWith": [ "ui/toast-stack", "fx-emphasis/glitch" ], "energy": "frantic" }, "title": "Shake", "description": "Frame-seeded positional jitter for impact and refusal beats.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 0.52 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "dom", "handlerId": "shake", "application": "actor" } ] } }, { "name": "fx-emphasis-spotlight", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/spotlight/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "emphasis", "focus", "iris" ], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "One region of a single actor should be isolated by an iris opening over it, with the rest of that actor falling away.", "avoidWhen": "Several things need attention in sequence; reopening an iris per subject is slower than dimming once with overlays/spotlight-overlay.", "pairsWith": [ "overlays/spotlight-overlay", "fx-treatments/magnifier" ], "energy": "measured" }, "title": "Spotlight", "description": "Circular iris that opens over the actor to isolate one region.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "x", "kind": "number", "defaultValue": 50 }, { "name": "y", "kind": "number", "defaultValue": 50 } ], "bindings": [ { "rendererId": "dom", "handlerId": "spotlight", "application": "actor" } ] } }, { "name": "fx-emphasis-tilt", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/tilt/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "depth", "emphasis", "perspective" ], "related": [], "intent": { "jobs": [ "exhibit", "emphasize" ], "useWhen": "A flat panel should read as an object with a face — a product shot that leans into the light rather than sitting square.", "avoidWhen": "The panel's content must be read closely; perspective costs legibility on exactly the text a demo needs to land.", "pairsWith": [ "browser/browser-panel", "fx-treatments/gloss" ], "energy": "calm" }, "title": "Tilt", "description": "Steady perspective lean that gives a flat panel a sense of being an object.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 8 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "dom", "handlerId": "tilt", "application": "actor" } ] } }, { "name": "fx-emphasis-trace", "type": "registry:block", "entry": "src/components/motionactor/fx/emphasis/trace/index.ts", "family": "fx-emphasis", "kind": "effect", "icon": "sparkles", "tags": [ "draw-on", "emphasis", "outline" ], "related": [], "intent": { "jobs": [ "reveal", "emphasize" ], "useWhen": "An element should announce itself by having its outline drawn on, as though someone ran a pen around the whole shape.", "avoidWhen": "The shape is complex or tiny; a perimeter trace over fine geometry reads as a shimmer rather than as a drawn line.", "pairsWith": [ "handdrawn/callout-circle", "fx-emphasis/edge-glow" ], "energy": "measured" }, "title": "Trace", "description": "Draws a stroke around the perimeter so an outline appears to be drawn on.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-emphasis" ], "collection": "emphasis", "controls": { "surface": "effect", "params": [ { "name": "color", "kind": "color", "defaultValue": "#66e3ff" }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "width", "kind": "number", "defaultValue": 2.5 } ], "bindings": [ { "rendererId": "dom", "handlerId": "trace", "application": "actor" } ] } }, { "name": "fx-reveals-ascii-dissolve", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/asciiDissolve/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "ascii", "digital", "dissolve", "reveal" ], "related": [], "intent": { "jobs": [ "bridge", "agitate" ], "useWhen": "A scene should cross a visibly computational threshold — source material becoming glyph data before the next state resolves.", "avoidWhen": "The subject must remain continuously legible or photographic; the glyph field deliberately interrupts both kinds of reading.", "pairsWith": [ "fx-treatments/ascii", "code/terminal" ], "energy": "energetic" }, "title": "ASCII Dissolve", "description": "Resolves an actor through deterministic glyph quantization and a visibility handoff.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "cellSize", "kind": "number", "defaultValue": 12 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "tintB", "kind": "number", "defaultValue": 0.88 }, { "name": "tintG", "kind": "number", "defaultValue": 0.96 }, { "name": "tintR", "kind": "number", "defaultValue": 0.82 } ], "bindings": [ { "rendererId": "dom", "handlerId": "dissolve", "application": "actor" }, { "rendererId": "htmlCanvas", "handlerId": "ascii", "application": "actor" } ] } }, { "name": "fx-reveals-ascii-sweep", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/asciiSweep/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "ascii", "digital", "reveal", "wipe" ], "related": [], "intent": { "jobs": [ "bridge", "reveal" ], "useWhen": "One state should become another through a visible machine pass — a scan line that reads the surface as glyphs and leaves the next state behind it.", "avoidWhen": "The two states must stay comparable during the change; the band destroys detail exactly where the eye is following it.", "pairsWith": [ "fx-treatments/ascii", "code/terminal" ], "energy": "energetic" }, "title": "ASCII Sweep", "description": "A band of phosphor glyphs crosses the surface and hands the old state off to the new one behind it.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "angle", "kind": "number", "defaultValue": 0 }, { "name": "bandWidth", "kind": "number", "defaultValue": 0.22 }, { "name": "cellSize", "kind": "number", "defaultValue": 10 }, { "name": "charset", "kind": "string", "defaultValue": " .:-=+*#%@" }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "tear", "kind": "number", "defaultValue": 0.06 }, { "name": "tint", "kind": "color", "defaultValue": "#7cffb2" }, { "name": "trail", "kind": "number", "defaultValue": 0.12 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "asciiSweep", "application": "actor" } ] } }, { "name": "fx-reveals-blur-reveal", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/blurReveal/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "blur", "focus", "reveal" ], "related": [], "intent": { "jobs": [ "reveal", "bridge" ], "useWhen": "The new subject should arrive as attention finding its mark — a soft focal handoff that settles into a crisp hero frame.", "avoidWhen": "The incoming content must be readable immediately; blur spends part of the beat withholding detail and can feel evasive there.", "pairsWith": [ "fx-treatments/blur", "ui/text-block" ], "energy": "calm" }, "title": "Blur Reveal", "description": "Resolves an actor from hidden through a soft focal plane into a crisp resting frame.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "strength", "kind": "number", "defaultValue": 16 } ], "bindings": [ { "rendererId": "dom", "handlerId": "blur", "application": "actor" }, { "rendererId": "dom", "handlerId": "dissolve", "application": "actor" } ] } }, { "name": "fx-reveals-burn-dissolve", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/burnDissolve/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "dissolve", "fire", "reveal" ], "related": [], "intent": { "jobs": [ "bridge", "agitate" ], "useWhen": "Something should be destroyed rather than removed — the old way going up, with a hot edge eating the surface as it goes.", "avoidWhen": "The departing element is neutral or will come back; burning it away makes a statement about it that the story may not mean.", "pairsWith": [ "fx-reveals/pixel-disintegrate", "fx-treatments/vintage" ], "energy": "energetic" }, "title": "Burn Dissolve", "description": "Burn-away reveal that eats the surface along a seeded noise front with a hot ember edge.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "noiseScale", "kind": "number", "defaultValue": 6 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "burnDissolve", "application": "actor" } ] } }, { "name": "fx-reveals-burn-dissolve-mask", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/burnDissolveMask/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "dissolve", "mask", "reveal" ], "related": [], "intent": { "jobs": [ "reveal", "emphasize" ], "useWhen": "Only part of a surface should burn through — a hole opening in a page over the thing behind it, the rest left intact.", "avoidWhen": "The whole element is leaving; the masked variant costs a target and gives nothing over fx-reveals/burn-dissolve.", "pairsWith": [ "fx-reveals/burn-dissolve", "documents/pdf-document" ], "energy": "energetic" }, "title": "Burn Dissolve Mask", "description": "Burns away only the masked region, leaving the rest of the actor intact.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "noiseScale", "kind": "number", "defaultValue": 7 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "burnDissolveMask", "application": "explicitTarget", "targetContract": { "dataKinds": [ "burnMask" ], "geometry": [ "mask" ] } } ] } }, { "name": "fx-reveals-dissolve", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/dissolve/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "fade", "retire", "reveal" ], "related": [], "intent": { "jobs": [ "bridge" ], "useWhen": "An element's work is done and it should retire without comment, under narration that has already moved on to the next thing.", "avoidWhen": "The exit is itself the beat; a plain fade on a moment that wanted a gesture is the effect equivalent of trailing off.", "pairsWith": [ "fx-reveals/wipe-reveal", "ui/text-block" ], "energy": "calm" }, "title": "Dissolve", "description": "Plain fade-out with a brightness and contrast droop, for retiring an element quietly.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "dom", "handlerId": "dissolve", "application": "actor" } ] } }, { "name": "fx-reveals-dither-dissolve", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/ditherDissolve/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "dissolve", "dither", "pixel", "reveal" ], "related": [], "intent": { "jobs": [ "bridge", "reveal" ], "useWhen": "A clean digital scene needs a textured cut whose pixel grid feels designed, technical, and tighter than flying fragments.", "avoidWhen": "The palette and subject are soft or organic; the ordered grid imposes a technical register that can fight the material.", "pairsWith": [ "fx-treatments/pixelation", "fx-reveals/ascii-dissolve" ], "energy": "measured" }, "title": "Dither Dissolve", "description": "Carries a visibility handoff through a deterministic ordered-dither field.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "opacity", "kind": "number", "defaultValue": 0.34 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "size", "kind": "number", "defaultValue": 5 } ], "bindings": [ { "rendererId": "dom", "handlerId": "dissolve", "application": "actor" }, { "rendererId": "dom", "handlerId": "shaderDither", "application": "actor" } ] } }, { "name": "fx-reveals-grain-dissolve", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/grainDissolve/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "dissolve", "film", "grain", "reveal" ], "related": [], "intent": { "jobs": [ "bridge", "reveal" ], "useWhen": "A scene change should feel tactile and atmospheric rather than geometric — image condensing from, or dispersing into, fine grain.", "avoidWhen": "The visual language is pristine UI or hard vector geometry; film grain muddies the exactness those subjects depend on.", "pairsWith": [ "fx-treatments/vintage", "fx-reveals/blur-reveal" ], "energy": "calm" }, "title": "Grain Dissolve", "description": "Carries a visibility handoff through a deterministic soft-light grain field.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "opacity", "kind": "number", "defaultValue": 0.26 }, { "name": "progress", "kind": "number", "defaultValue": 1 } ], "bindings": [ { "rendererId": "dom", "handlerId": "dissolve", "application": "actor" }, { "rendererId": "dom", "handlerId": "shaderGrain", "application": "actor" } ] } }, { "name": "fx-reveals-page-curl", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/pageCurl/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "curl", "page", "reveal" ], "related": [], "intent": { "jobs": [ "bridge", "reveal" ], "useWhen": "Moving on should feel like turning a page — a document, a chapter, any next-in-sequence beat with paper logic behind it.", "avoidWhen": "The surface is not paper-like; curling a live dashboard is a metaphor that fights the material it is applied to.", "pairsWith": [ "scene3d/book", "fx-treatments/paper-texture" ], "energy": "measured" }, "title": "Page Curl", "description": "Peels a page up from a corner, showing a tinted backface and a lifting shadow.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "backfaceTint", "kind": "color", "defaultValue": "#e7dcc8" }, { "name": "corner", "kind": "string", "defaultValue": "topRight" }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "radius", "kind": "number", "defaultValue": 0.18 }, { "name": "shadowStrength", "kind": "number", "defaultValue": 0.28 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "pageCurl", "application": "explicitTarget", "targetContract": { "dataKinds": [ "pdfPage" ], "geometry": [ "rect" ] } } ] } }, { "name": "fx-reveals-page-deform", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/pageDeform/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "deform", "page", "reveal" ], "related": [], "intent": { "jobs": [ "exhibit", "bridge" ], "useWhen": "A sheet should behave like a sheet while staying in place — a ripple across it, or a roll that proves it has a back.", "avoidWhen": "The content must stay readable throughout; deformation warps type at exactly the moment somebody is trying to read it.", "pairsWith": [ "fx-reveals/page-curl", "fx-treatments/paper-texture" ], "energy": "calm" }, "title": "Page Deform", "description": "Bends a page in place — a rippling wave or a cylinder roll with a tinted backface.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "amplitude", "kind": "number", "defaultValue": 0.035 }, { "name": "backfaceTint", "kind": "color", "defaultValue": "#e7dcc8" }, { "name": "mode", "kind": "string", "defaultValue": "wave" }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "radius", "kind": "number", "defaultValue": 0.16 }, { "name": "shadowStrength", "kind": "number", "defaultValue": 0.22 }, { "name": "wavelength", "kind": "number", "defaultValue": 3.5 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "pageDeform", "application": "explicitTarget", "targetContract": { "dataKinds": [ "pdfPage" ], "geometry": [ "rect" ] } } ] } }, { "name": "fx-reveals-pixel-disintegrate", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/pixelDisintegrate/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "dissolve", "particles", "reveal" ], "related": [], "intent": { "jobs": [ "bridge", "agitate" ], "useWhen": "An element should come apart into fragments and drift off — data scattering, an old surface being taken to pieces.", "avoidWhen": "The register is calm or documentary; disintegration is a loud exit and it competes with whatever is being said over it.", "pairsWith": [ "fx-reveals/burn-dissolve", "ui/particle-morph" ], "energy": "energetic" }, "title": "Pixel Disintegrate", "description": "Shatters the surface into tumbling cells that drift along a directed cone.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "direction", "kind": "number", "defaultValue": -1.5707963267948966 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "rotationSpeed", "kind": "number", "defaultValue": 2 }, { "name": "scale", "kind": "number", "defaultValue": 0.3 }, { "name": "speed", "kind": "number", "defaultValue": 1.5 }, { "name": "spread", "kind": "number", "defaultValue": 1.0471975511965976 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "pixelDisintegrate", "application": "actor" } ] } }, { "name": "fx-reveals-sticker-peel", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/stickerPeel/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "paper", "peel", "reveal" ], "related": [], "intent": { "jobs": [ "reveal", "bridge" ], "useWhen": "Something should be lifted off to show what sits underneath — a label peeled back, a layer removed by hand.", "avoidWhen": "Nothing meaningful sits behind it; peeling to reveal an empty background is a gesture that pays off with nothing.", "pairsWith": [ "fx-reveals/page-curl", "handdrawn/photo-frame" ], "energy": "measured" }, "title": "Sticker Peel", "description": "Curls the surface off its backing from a corner along a travel vector.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "cornerX", "kind": "number", "defaultValue": 1280 }, { "name": "cornerY", "kind": "number", "defaultValue": 0 }, { "name": "curlRadius", "kind": "number", "defaultValue": 140 }, { "name": "dirX", "kind": "number", "defaultValue": -0.7071067811865476 }, { "name": "dirY", "kind": "number", "defaultValue": 0.7071067811865476 }, { "name": "maxAxisDist", "kind": "number", "defaultValue": 1220 }, { "name": "peelProgress", "kind": "number", "defaultValue": 0.95 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "stickerPeel", "application": "actor" } ] } }, { "name": "fx-reveals-wipe-reveal", "type": "registry:block", "entry": "src/components/motionactor/fx/reveals/wipeReveal/index.ts", "family": "fx-reveals", "kind": "effect", "icon": "layers", "tags": [ "clip", "reveal", "wipe" ], "related": [], "intent": { "jobs": [ "reveal" ], "useWhen": "A clean, decisive uncovering — the new state arriving edge to edge in one confident pass, on the narration's beat.", "avoidWhen": "The two states must be compared side by side; a wipe passes through and leaves nothing to hold them against each other.", "pairsWith": [ "fx-reveals/dissolve", "ui/text-reveal-card" ], "energy": "measured" }, "title": "Wipe Reveal", "description": "Hard-edged directional wipe that uncovers the actor edge-to-edge.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-reveals" ], "collection": "reveals", "controls": { "surface": "effect", "params": [ { "name": "direction", "kind": "string", "defaultValue": "left" }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "dom", "handlerId": "wipeReveal", "application": "actor" } ] } }, { "name": "fx-treatments-ascii", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/ascii/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "retro", "stylize", "treatment" ], "related": [], "intent": { "jobs": [ "reveal", "exhibit" ], "useWhen": "The subject should resolve through a machine's eye — a surface rendered as glyph density under a technical claim.", "avoidWhen": "Fine detail carries the meaning; the glyph ramp throws away everything except coarse luminance.", "pairsWith": [ "code/terminal", "fx-treatments/halftone" ], "energy": "measured" }, "title": "Ascii", "description": "Glyph-quantization treatment: redraws the actor surface as a tinted monospace density ramp.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "cellSize", "kind": "number", "defaultValue": 9 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "tintB", "kind": "number", "defaultValue": 0.75 }, { "name": "tintG", "kind": "number", "defaultValue": 0.95 }, { "name": "tintR", "kind": "number", "defaultValue": 0.6 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "ascii", "application": "actor" } ] } }, { "name": "fx-treatments-blur", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/blur/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "defocus", "transition", "treatment" ], "related": [], "intent": { "jobs": [ "bridge", "emphasize" ], "useWhen": "Attention should pass through a defocus and come back sharp — a rack between two ideas rather than a held soft state.", "avoidWhen": "The element must stay soft across a long hold; this is shaped as a pass, and parking on its midpoint wastes the shape.", "pairsWith": [ "fx-treatments/frosted-glass", "fx-reveals/dissolve" ], "energy": "calm" }, "title": "Blur", "description": "Defocus shaped as a half-sine over progress, for passing through a defocus rather than holding one.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "strength", "kind": "number", "defaultValue": 8 } ], "bindings": [ { "rendererId": "dom", "handlerId": "blur", "application": "actor" } ] } }, { "name": "fx-treatments-crt", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/crt/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "retro", "screen", "treatment" ], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "The frame should read as a tube — period computing, surveillance, a signal arriving on hardware that has weight.", "avoidWhen": "The screen content must be read precisely; curvature, roll and vignette each cost the legibility a demo depends on.", "pairsWith": [ "media/television", "fx-treatments/scanline" ], "energy": "measured" }, "title": "Crt", "description": "CRT tube treatment: barrel curvature, rolling scanlines and a corner vignette.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "curvatureX", "kind": "number", "defaultValue": 6 }, { "name": "curvatureY", "kind": "number", "defaultValue": 5.5 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "scanIntensity", "kind": "number", "defaultValue": 0.08 }, { "name": "vignette", "kind": "number", "defaultValue": 0.3 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "crt", "application": "actor" } ] } }, { "name": "fx-treatments-elastic-bulge", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/elasticBulge/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "distortion", "lens", "treatment" ], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "A point on the surface should swell as though pressed from behind — a soft physical accent under a word or a control.", "avoidWhen": "The distortion lands on type or data; a bulge across a chart makes the values it warps untrustworthy.", "pairsWith": [ "ui/cursor", "fx-treatments/magnifier" ], "energy": "energetic" }, "title": "Elastic Bulge", "description": "Local lens bulge that swells the surface around a normalized point.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "centerX", "kind": "number", "defaultValue": 0.18 }, { "name": "centerY", "kind": "number", "defaultValue": 0.74 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "radius", "kind": "number", "defaultValue": 0.24 }, { "name": "strength", "kind": "number", "defaultValue": 0.65 }, { "name": "verticalBias", "kind": "number", "defaultValue": 0.18 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "elasticBulge", "application": "actor" } ] } }, { "name": "fx-treatments-fluid-prism-text", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/fluidPrismText/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "distortion", "glass", "treatment" ], "related": [], "intent": { "jobs": [ "celebrate", "exhibit" ], "useWhen": "A short line should look expensive — prismatic light moving through it while a name or a claim holds on screen.", "avoidWhen": "The register is utilitarian, or the line is long; prismatic fringing over body text reads as a rendering artefact.", "pairsWith": [ "ui/particle-text", "fx-treatments/gloss" ], "energy": "measured" }, "title": "Fluid Prism", "description": "Prismatic fluid lens with chromatic fringing, specular shine and seeded shimmer.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "centerX", "kind": "number", "defaultValue": 0.18 }, { "name": "centerY", "kind": "number", "defaultValue": 0.24 }, { "name": "chromaticAberration", "kind": "number", "defaultValue": 0.012 }, { "name": "distortion", "kind": "number", "defaultValue": 0.08 }, { "name": "flickerAmount", "kind": "number", "defaultValue": 0.02 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "radius", "kind": "number", "defaultValue": 0.22 }, { "name": "shine", "kind": "number", "defaultValue": 0.28 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "fluidPrismText", "application": "actor" } ] } }, { "name": "fx-treatments-frosted-glass", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/frostedGlass/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "glass", "overlay", "treatment" ], "related": [], "intent": { "jobs": [ "orient", "emphasize" ], "useWhen": "A panel should sit above the scene without hiding it — chrome, a sheet, an overlay that stays part of the same space.", "avoidWhen": "There is nothing behind it; frosted glass over a flat fill is expensive blur that produces a slightly grey rectangle.", "pairsWith": [ "overlays/callout", "ui/toast" ], "energy": "calm" }, "title": "Frosted Glass", "description": "Frosted panel over a region: blurs, refracts, tints and lights the edge.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "contrast", "kind": "number", "defaultValue": 1.16 }, { "name": "distortion", "kind": "number", "defaultValue": 1.4 }, { "name": "edgeLight", "kind": "number", "defaultValue": 0.18 }, { "name": "grain", "kind": "number", "defaultValue": 0.024 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "radius", "kind": "number", "defaultValue": 14 }, { "name": "saturation", "kind": "number", "defaultValue": 1.08 }, { "name": "tintB", "kind": "number", "defaultValue": 1 }, { "name": "tintG", "kind": "number", "defaultValue": 0.94 }, { "name": "tintOpacity", "kind": "number", "defaultValue": 0.26 }, { "name": "tintR", "kind": "number", "defaultValue": 0.9 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "frostedGlass", "application": "explicitTarget", "targetContract": { "dataKinds": [ "frostedGlassRegion" ], "geometry": [ "rect" ] } } ] } }, { "name": "fx-treatments-glitch", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/glitch/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "emphasis", "glitch", "treatment" ], "related": [], "intent": { "jobs": [ "agitate", "bridge" ], "useWhen": "The whole frame should tear for a moment — a broadcast fault used as a cut, or the beat where the picture loses its grip.", "avoidWhen": "It has to hold; slice displacement is a transient, and held for seconds it stops being a fault and becomes the look.", "pairsWith": [ "fx-treatments/scanline", "fx-emphasis/glitch" ], "energy": "frantic" }, "title": "Glitch", "description": "Broadcast tear: seeded slice displacement and channel separation.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "backgroundColor", "kind": "string", "defaultValue": "white" }, { "name": "intensity", "kind": "number", "defaultValue": 1 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "glitch", "application": "actor" } ] } }, { "name": "fx-treatments-gloss", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/gloss/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "highlight", "product", "treatment" ], "related": [], "intent": { "jobs": [ "celebrate", "emphasize" ], "useWhen": "A surface should catch the light exactly once — the shine that says finished, delivered, worth looking at.", "avoidWhen": "It repeats on a loop; a sweep that keeps coming back stops reading as light and starts reading as a scanning animation.", "pairsWith": [ "ui/badge", "fx-emphasis/bar-shine" ], "energy": "calm" }, "title": "Gloss", "description": "Travelling specular sweep across the actor surface.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "glossTimeScale", "kind": "number", "defaultValue": 1 }, { "name": "progress", "kind": "number", "defaultValue": 1 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "gloss", "application": "actor" } ] } }, { "name": "fx-treatments-halftone", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/halftone/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "print", "stylize", "treatment" ], "related": [], "intent": { "jobs": [ "bridge", "exhibit" ], "useWhen": "The image should resolve into print — a dot grid under an editorial or archival register, or as the passage between two states.", "avoidWhen": "The subject is a live interface; halftoning a UI makes it look like a scan of a screenshot rather than a product.", "pairsWith": [ "fx-treatments/paper-texture", "fx-treatments/vintage" ], "energy": "measured" }, "title": "Halftone", "description": "Print-style halftone that resolves the surface into a dot grid.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "animateDotSize", "kind": "boolean", "defaultValue": true }, { "name": "backgroundB", "kind": "number", "defaultValue": 0.08 }, { "name": "backgroundG", "kind": "number", "defaultValue": 0.04 }, { "name": "backgroundR", "kind": "number", "defaultValue": 0.04 }, { "name": "dotSize", "kind": "number", "defaultValue": 6 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "halftone", "application": "actor" } ] } }, { "name": "fx-treatments-liquid-glass-distortion", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/liquidGlassDistortion/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "distortion", "glass", "treatment" ], "related": [], "intent": { "jobs": [ "exhibit", "celebrate" ], "useWhen": "A lens should ride over the surface — a glass puck with real refraction, for a beat that is about material and craft.", "avoidWhen": "The audience is reading through it; refraction plus fringing makes anything beneath the puck approximate.", "pairsWith": [ "fx-treatments/magnifier", "fx-treatments/frosted-glass" ], "energy": "calm" }, "title": "Liquid Glass", "description": "Refracting glass puck with chromatic fringing, noise and a standing ripple.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "centerX", "kind": "number", "defaultValue": 0.24 }, { "name": "centerY", "kind": "number", "defaultValue": 0.28 }, { "name": "chromaticAberration", "kind": "number", "defaultValue": 0.008 }, { "name": "distortion", "kind": "number", "defaultValue": 0.12 }, { "name": "noiseAmount", "kind": "number", "defaultValue": 0.015 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "radius", "kind": "number", "defaultValue": 0.2 }, { "name": "rippleAmount", "kind": "number", "defaultValue": 0.008 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "liquidGlassDistortion", "application": "actor" } ] } }, { "name": "fx-treatments-magnifier", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/magnifier/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "focus", "lens", "treatment" ], "related": [], "intent": { "jobs": [ "emphasize", "demonstrate" ], "useWhen": "A detail is too small to see and the film should go and look at it — a lens brought over the region while it is discussed.", "avoidWhen": "The whole surface matters; a magnifier answers a question about one spot and hides the context that framed it.", "pairsWith": [ "documents/pdf-document", "overlays/callout" ], "energy": "measured" }, "title": "Magnifier", "description": "Handheld magnifier lens whose centre drifts on seeded jitter.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "baseX", "kind": "number", "defaultValue": 0.5 }, { "name": "baseY", "kind": "number", "defaultValue": 0.5 }, { "name": "jitterAmpX", "kind": "number", "defaultValue": 0.32 }, { "name": "jitterAmpY", "kind": "number", "defaultValue": 0.025 }, { "name": "jitterSpeed", "kind": "number", "defaultValue": 0.3 }, { "name": "magnify", "kind": "number", "defaultValue": 2.4 }, { "name": "radius", "kind": "number", "defaultValue": 0.2 }, { "name": "seed", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "magnifier", "application": "actor" } ] } }, { "name": "fx-treatments-paper-texture", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/paperTexture/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "paper", "texture", "treatment" ], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "A flat rectangle has to read as a physical sheet — fibre and blotching under an analogue or archival register.", "avoidWhen": "The register is clean and digital; grain over a product UI reads as a compression artefact rather than as paper.", "pairsWith": [ "handdrawn/photo-frame", "fx-treatments/vintage" ], "energy": "calm" }, "title": "Paper Texture", "description": "Lays paper fibre and blotching over a region so a flat rectangle reads as a sheet.", "dependencies": [ "@motionactor/core", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "grain", "kind": "number", "defaultValue": 0.045 }, { "name": "grunge", "kind": "number", "defaultValue": 0.42 }, { "name": "progress", "kind": "number", "defaultValue": 1 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "paperTexture", "application": "explicitTarget", "targetContract": { "dataKinds": [ "paperRegion" ], "geometry": [ "rect", "quad" ] } } ] } }, { "name": "fx-treatments-pixelate", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/pixelate/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "lofi", "stylize", "treatment" ], "related": [], "intent": { "jobs": [ "bridge", "agitate" ], "useWhen": "A DOM surface should degrade cheaply — a quick loss of fidelity mid-transition where a true mosaic is not worth the cost.", "avoidWhen": "The blocks themselves are the look; this only approximates with blur and contrast, and fx-treatments/pixelation is the real thing.", "pairsWith": [ "fx-treatments/pixelation", "fx-reveals/dissolve" ], "energy": "measured" }, "title": "Pixelate", "description": "Low-fidelity DOM degrade approximated with blur and contrast; see the pixelation treatment for true blocks.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "amount", "kind": "number", "defaultValue": 4 }, { "name": "progress", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "dom", "handlerId": "pixelate", "application": "actor" } ] } }, { "name": "fx-treatments-pixelation", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/pixelation/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "censor", "stylize", "treatment" ], "related": [], "intent": { "jobs": [ "bridge", "agitate" ], "useWhen": "The image should break down into actual blocks — censoring, a low-fidelity origin, or a resolve from mosaic into detail.", "avoidWhen": "The element is small; at low block counts a small subject becomes four squares and stops being recognisable at all.", "pairsWith": [ "fx-treatments/pixelate", "fx-treatments/ascii" ], "energy": "measured" }, "title": "Pixelation", "description": "Mosaic downsample with optional softening of the block edges.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "cellSize", "kind": "number", "defaultValue": 18 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "softness", "kind": "number", "defaultValue": 0 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "pixelation", "application": "actor" } ] } }, { "name": "fx-treatments-rain", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/rain/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "atmosphere", "treatment", "weather" ], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "The scene should feel weathered and observed — looking at something through glass while the narration sets a mood.", "avoidWhen": "The content is a working interface; droplet refraction over a UI reads as a broken render rather than as weather.", "pairsWith": [ "media/video", "fx-treatments/frosted-glass" ], "energy": "calm" }, "title": "Rain", "description": "Rain-on-glass overlay whose streaking droplets refract the surface beneath.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 1 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "speed", "kind": "number", "defaultValue": 0.2 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "rain", "application": "actor" } ] } }, { "name": "fx-treatments-ripple", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/ripple/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "atmosphere", "impact", "treatment", "water" ], "related": [], "intent": { "jobs": [ "emphasize", "orient" ], "useWhen": "A moment should land as a physical impact on the surface — something struck the image and it is still ringing.", "avoidWhen": "Text must stay readable through the hit; the refraction bends glyph edges exactly where the ring passes.", "pairsWith": [ "fx-treatments/frosted-glass", "media/video" ], "energy": "measured" }, "title": "Ripple", "description": "Water-surface ripple: authored hits send refracting rings across the actor, each with its own time and loudness.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "decay", "kind": "number", "defaultValue": 1.4 }, { "name": "glint", "kind": "number", "defaultValue": 0.35 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "refraction", "kind": "number", "defaultValue": 0.06 }, { "name": "speed", "kind": "number", "defaultValue": 0.35 }, { "name": "splashes", "kind": "array", "defaultValue": [] }, { "name": "wavelength", "kind": "number", "defaultValue": 0.08 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "ripple", "application": "actor" } ] } }, { "name": "fx-treatments-scanline", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/scanline/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "retro", "screen", "treatment" ], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "A cheap, legible CRT register over a DOM surface — surveillance, terminal work, a signal being monitored.", "avoidWhen": "The full tube look is wanted; this is the flat cousin, and fx-treatments/crt carries the curvature and the vignette.", "pairsWith": [ "fx-treatments/crt", "code/terminal" ], "energy": "measured" }, "title": "Scanline", "description": "CRT scanline overlay with a travelling sweep band; the cheap DOM cousin of the crt treatment.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "intensity", "kind": "number", "defaultValue": 0.28 }, { "name": "progress", "kind": "number", "defaultValue": 0 }, { "name": "spacing", "kind": "number", "defaultValue": 4 }, { "name": "speed", "kind": "number", "defaultValue": 1.6 } ], "bindings": [ { "rendererId": "dom", "handlerId": "scanline", "application": "actor" } ] } }, { "name": "fx-treatments-vintage", "type": "registry:block", "entry": "src/components/motionactor/fx/treatments/vintage/index.ts", "family": "fx-treatments", "kind": "effect", "icon": "sparkles", "tags": [ "film", "grade", "treatment" ], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "The footage should read as recovered — grain, vignette and a lifted black point under an archival or nostalgic beat.", "avoidWhen": "The claim is that this is happening now; an aged grade quietly places the material in the past.", "pairsWith": [ "fx-treatments/paper-texture", "fx-treatments/halftone" ], "energy": "calm" }, "title": "Vintage", "description": "Aged-film grade: seeded grain, vignette, warm shift and a lifted black point.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/react" ], "registryDependencies": [], "exports": [ "@motionactor/fx-treatments" ], "collection": "treatments", "controls": { "surface": "effect", "params": [ { "name": "fade", "kind": "number", "defaultValue": 0.385 }, { "name": "grain", "kind": "number", "defaultValue": 0.126 }, { "name": "progress", "kind": "number", "defaultValue": 1 }, { "name": "vignette", "kind": "number", "defaultValue": 0.6 }, { "name": "warmth", "kind": "number", "defaultValue": 0.28 } ], "bindings": [ { "rendererId": "htmlCanvas", "handlerId": "vintage", "application": "actor" } ] } }, { "name": "globe-globe", "type": "registry:block", "entry": "src/components/motionactor/globe/globe/index.ts", "family": "globe", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "exhibit" ], "useWhen": "Scale or reach is the claim — where the users are, where the data travels — and the planet is what makes the number feel large.", "avoidWhen": "The geography is incidental; a spinning globe behind a domestic story is decoration and reads as a stock-footage reflex.", "pairsWith": [ "fx-emphasis/glow", "ui/text-block" ], "energy": "measured" }, "title": "Globe", "description": "Globe.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@react-three/drei", "@react-three/fiber", "r3f-globe", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/globe" ], "controls": { "fields": [ { "path": "appearance.autoRotate", "groupName": "appearance", "leafName": "autoRotate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "appearance.rotateSpeed", "groupName": "appearance", "leafName": "rotateSpeed", "kind": "number", "defaultValue": 0.05, "editable": true, "isReactive": false }, { "path": "appearance.showAtmosphere", "groupName": "appearance", "leafName": "showAtmosphere", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "appearance.showGlobe", "groupName": "appearance", "leafName": "showGlobe", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "camera.fov", "groupName": "camera", "leafName": "fov", "kind": "number", "defaultValue": 45, "editable": true, "isReactive": false }, { "path": "camera.globeRotation", "groupName": "camera", "leafName": "globeRotation", "kind": "array", "defaultValue": [ 0, 0, 0 ], "editable": false, "isReactive": false }, { "path": "camera.lookAt", "groupName": "camera", "leafName": "lookAt", "kind": "array", "defaultValue": [ 0, 0, 0 ], "editable": false, "isReactive": false }, { "path": "camera.position", "groupName": "camera", "leafName": "position", "kind": "array", "defaultValue": [ 0, 0, 350 ], "editable": false, "isReactive": false }, { "path": "content.arcs", "groupName": "content", "leafName": "arcs", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "content.bumpImageUrl", "groupName": "content", "leafName": "bumpImageUrl", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "content.colors", "groupName": "content", "leafName": "colors", "kind": "object", "defaultValue": { "water": "#1a365d", "land": "#2d3748", "atmosphere": "lightskyblue", "atmosphereAltitude": 0.15, "markerDefault": "#ef4444", "markerActive": "#f59e0b", "markerHover": "#22c55e", "arcDefault": "#3b82f6", "arcActive": "#f59e0b", "background": "#0f172a" }, "editable": false, "isReactive": false }, { "path": "content.globeImageUrl", "groupName": "content", "leafName": "globeImageUrl", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "content.labels", "groupName": "content", "leafName": "labels", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "content.markers", "groupName": "content", "leafName": "markers", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "content.polygons", "groupName": "content", "leafName": "polygons", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "content.rings", "groupName": "content", "leafName": "rings", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 720, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1280, "editable": true, "isReactive": false }, { "path": "reveal.animationProgress", "groupName": "reveal", "leafName": "animationProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "reveal.isRevealed", "groupName": "reveal", "leafName": "isRevealed", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "showStars", "groupName": null, "leafName": "showStars", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "starsCount", "groupName": null, "leafName": "starsCount", "kind": "number", "defaultValue": 5000, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "handdrawn-arrow", "type": "registry:block", "entry": "src/components/motionactor/handdrawn/arrow/index.ts", "family": "handdrawn", "kind": "primitive", "icon": "sparkles", "tags": [ "annotate", "arrow", "emphasize" ], "related": [], "intent": { "jobs": [ "emphasize", "orient" ], "useWhen": "The narrator points at something — this bit, here — and the frame needs a human hand to agree with them, drawn on in the moment.", "avoidWhen": "The register is sober enterprise, or the arrow would point at something already unmissable; a marker mark on a calm frame is clutter.", "pairsWith": [ "handdrawn/underline", "overlays/callout" ], "energy": "energetic" }, "title": "Arrow", "description": "Marker arrow that draws itself on and then boils in place.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/handdrawn" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "boil.amp", "groupName": "boil", "leafName": "amp", "kind": "number", "defaultValue": 2, "editable": true, "isReactive": false }, { "path": "boil.enabled", "groupName": "boil", "leafName": "enabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "boil.frameDrop", "groupName": "boil", "leafName": "frameDrop", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "boil.rot", "groupName": "boil", "leafName": "rot", "kind": "number", "defaultValue": 0.6, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "draw", "groupName": null, "leafName": "draw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "ink.color", "groupName": "ink", "leafName": "color", "kind": "color", "defaultValue": "#f4f2ec", "editable": true, "isReactive": false }, { "path": "ink.soft", "groupName": "ink", "leafName": "soft", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "ink.strokeWidth", "groupName": "ink", "leafName": "strokeWidth", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "path", "groupName": null, "leafName": "path", "kind": "string", "editable": false, "isReactive": false }, { "path": "pose", "groupName": null, "leafName": "pose", "kind": "object", "editable": false, "isReactive": false }, { "path": "shape.curve", "groupName": "shape", "leafName": "curve", "kind": "string", "defaultValue": "swoop", "editable": true, "isReactive": false }, { "path": "shape.seed", "groupName": "shape", "leafName": "seed", "kind": "number", "defaultValue": 7, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [ { "name": "drawOn", "label": "Draw On", "parameterMode": "duration-only", "duration": { "default": 0.7 } }, { "name": "fadeOut", "label": "Fade Out", "parameterMode": "duration-only", "duration": { "default": 0.3 } } ], "targets": [] } }, { "name": "handdrawn-box-label", "type": "registry:block", "entry": "src/components/motionactor/handdrawn/boxLabel/index.ts", "family": "handdrawn", "kind": "primitive", "icon": "sparkles", "tags": [ "annotate", "emphasize", "label" ], "related": [], "intent": { "jobs": [ "emphasize", "orient" ], "useWhen": "A region of the frame needs both a ring and a name — this panel here is the queue — with the box landing first and the label after it closes.", "avoidWhen": "The thing already carries a visible label; ringing and naming it a second time is documentary style applied to nothing.", "pairsWith": [ "handdrawn/arrow", "overlays/callout" ], "energy": "measured" }, "title": "Box Label", "description": "Wobbled box ringed around a region, with a handwritten label.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/handdrawn" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "boil.amp", "groupName": "boil", "leafName": "amp", "kind": "number", "defaultValue": 1.6, "editable": true, "isReactive": false }, { "path": "boil.enabled", "groupName": "boil", "leafName": "enabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "boil.frameDrop", "groupName": "boil", "leafName": "frameDrop", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "boil.rot", "groupName": "boil", "leafName": "rot", "kind": "number", "defaultValue": 0.4, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.fontFamily", "groupName": "content", "leafName": "fontFamily", "kind": "string", "defaultValue": "\"Caveat\", ui-rounded, cursive", "editable": true, "isReactive": false }, { "path": "content.fontSize", "groupName": "content", "leafName": "fontSize", "kind": "number", "defaultValue": 48, "editable": true, "isReactive": false }, { "path": "content.label", "groupName": "content", "leafName": "label", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.labelPosition", "groupName": "content", "leafName": "labelPosition", "kind": "string", "defaultValue": "above", "editable": true, "isReactive": false }, { "path": "draw", "groupName": null, "leafName": "draw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "ink.color", "groupName": "ink", "leafName": "color", "kind": "color", "defaultValue": "#f4f2ec", "editable": true, "isReactive": false }, { "path": "ink.labelColor", "groupName": "ink", "leafName": "labelColor", "kind": "color", "defaultValue": "#ffd66b", "editable": true, "isReactive": false }, { "path": "ink.strokeWidth", "groupName": "ink", "leafName": "strokeWidth", "kind": "number", "defaultValue": 5, "editable": true, "isReactive": false }, { "path": "labelOpacity", "groupName": null, "leafName": "labelOpacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "path", "groupName": null, "leafName": "path", "kind": "string", "editable": false, "isReactive": false }, { "path": "pose", "groupName": null, "leafName": "pose", "kind": "object", "editable": false, "isReactive": false }, { "path": "shape.radius", "groupName": "shape", "leafName": "radius", "kind": "number", "defaultValue": 26, "editable": true, "isReactive": false }, { "path": "shape.seed", "groupName": "shape", "leafName": "seed", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [ { "name": "fadeOut", "label": "Fade Out", "parameterMode": "duration-only", "duration": { "default": 0.35 } }, { "name": "show", "label": "Show", "parameterMode": "duration-only", "duration": { "default": 0.75 } } ], "targets": [] } }, { "name": "handdrawn-callout-circle", "type": "registry:block", "entry": "src/components/motionactor/handdrawn/calloutCircle/index.ts", "family": "handdrawn", "kind": "primitive", "icon": "sparkles", "tags": [ "annotate", "callout", "emphasize" ], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "Something small inside a busy frame must be singled out the way a person would scrawl a ring around it mid-sentence.", "avoidWhen": "The target fills the frame, or several things need ringing at once; a screen full of circles emphasises nothing at all.", "pairsWith": [ "handdrawn/arrow", "overlays/spotlight-overlay" ], "energy": "energetic" }, "title": "Callout Circle", "description": "Scrawled ring with optional scribble hatch and a labelled leader.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/handdrawn" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "boil.amp", "groupName": "boil", "leafName": "amp", "kind": "number", "defaultValue": 1.8, "editable": true, "isReactive": false }, { "path": "boil.enabled", "groupName": "boil", "leafName": "enabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "boil.frameDrop", "groupName": "boil", "leafName": "frameDrop", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "boil.rot", "groupName": "boil", "leafName": "rot", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "connectorDraw", "groupName": null, "leafName": "connectorDraw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "content.fontFamily", "groupName": "content", "leafName": "fontFamily", "kind": "string", "defaultValue": "\"Caveat\", ui-rounded, cursive", "editable": true, "isReactive": false }, { "path": "content.fontSize", "groupName": "content", "leafName": "fontSize", "kind": "number", "defaultValue": 44, "editable": true, "isReactive": false }, { "path": "content.label", "groupName": "content", "leafName": "label", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "draw", "groupName": null, "leafName": "draw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "hatchPath", "groupName": null, "leafName": "hatchPath", "kind": "string", "editable": false, "isReactive": false }, { "path": "ink.color", "groupName": "ink", "leafName": "color", "kind": "color", "defaultValue": "#ff8a5c", "editable": true, "isReactive": false }, { "path": "ink.labelColor", "groupName": "ink", "leafName": "labelColor", "kind": "color", "defaultValue": "#f4f2ec", "editable": true, "isReactive": false }, { "path": "ink.strokeWidth", "groupName": "ink", "leafName": "strokeWidth", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false }, { "path": "labelOpacity", "groupName": null, "leafName": "labelOpacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "pose", "groupName": null, "leafName": "pose", "kind": "object", "editable": false, "isReactive": false }, { "path": "ringPath", "groupName": null, "leafName": "ringPath", "kind": "string", "editable": false, "isReactive": false }, { "path": "scribbleDraw", "groupName": null, "leafName": "scribbleDraw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "shape.connector", "groupName": "shape", "leafName": "connector", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "shape.scribble", "groupName": "shape", "leafName": "scribble", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "shape.seed", "groupName": "shape", "leafName": "seed", "kind": "number", "defaultValue": 5, "editable": true, "isReactive": false }, { "path": "shape.wobblePct", "groupName": "shape", "leafName": "wobblePct", "kind": "number", "defaultValue": 4, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [ { "name": "fadeOut", "label": "Fade Out", "parameterMode": "duration-only", "duration": { "default": 0.3 } }, { "name": "show", "label": "Show", "parameterMode": "duration-only", "duration": { "default": 0.7 } } ], "targets": [] } }, { "name": "handdrawn-photo-frame", "type": "registry:block", "entry": "src/components/motionactor/handdrawn/photoFrame/index.ts", "family": "handdrawn", "kind": "primitive", "icon": "sparkles", "tags": [ "annotate", "frame", "media" ], "related": [], "intent": { "jobs": [ "exhibit", "emphasize" ], "useWhen": "A photo or clip should read as pinned into a sketchbook — a scrapbook, an evidence board, a moment somebody kept.", "avoidWhen": "The media is the hero at full bleed; a scrawled border shrinks it and adds a voice the image never asked for.", "pairsWith": [ "media/image", "handdrawn/arrow" ], "energy": "calm" }, "title": "Photo Frame", "description": "Wobbled border scrawled around a media slot, with corner sparks and a caption.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/handdrawn" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "boil.amp", "groupName": "boil", "leafName": "amp", "kind": "number", "defaultValue": 1.6, "editable": true, "isReactive": false }, { "path": "boil.enabled", "groupName": "boil", "leafName": "enabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "boil.frameDrop", "groupName": "boil", "leafName": "frameDrop", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "boil.rot", "groupName": "boil", "leafName": "rot", "kind": "number", "defaultValue": 0.35, "editable": true, "isReactive": false }, { "path": "borderPath", "groupName": null, "leafName": "borderPath", "kind": "string", "editable": false, "isReactive": false }, { "path": "captionOpacity", "groupName": null, "leafName": "captionOpacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.caption", "groupName": "content", "leafName": "caption", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.fontFamily", "groupName": "content", "leafName": "fontFamily", "kind": "string", "defaultValue": "\"Caveat\", ui-rounded, cursive", "editable": true, "isReactive": false }, { "path": "content.fontSize", "groupName": "content", "leafName": "fontSize", "kind": "number", "defaultValue": 52, "editable": true, "isReactive": false }, { "path": "doodleDraw", "groupName": null, "leafName": "doodleDraw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "doodlePaths", "groupName": null, "leafName": "doodlePaths", "kind": "array", "editable": false, "isReactive": false }, { "path": "draw", "groupName": null, "leafName": "draw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "ink.captionColor", "groupName": "ink", "leafName": "captionColor", "kind": "color", "defaultValue": "#ffd66b", "editable": true, "isReactive": false }, { "path": "ink.color", "groupName": "ink", "leafName": "color", "kind": "color", "defaultValue": "#f4f2ec", "editable": true, "isReactive": false }, { "path": "ink.strokeWidth", "groupName": "ink", "leafName": "strokeWidth", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "pose", "groupName": null, "leafName": "pose", "kind": "object", "editable": false, "isReactive": false }, { "path": "style.doodles", "groupName": "style", "leafName": "doodles", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "style.margin", "groupName": "style", "leafName": "margin", "kind": "number", "defaultValue": 16, "editable": true, "isReactive": false }, { "path": "style.seed", "groupName": "style", "leafName": "seed", "kind": "number", "defaultValue": 14, "editable": true, "isReactive": false }, { "path": "style.tilt", "groupName": "style", "leafName": "tilt", "kind": "number", "defaultValue": -1.2, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [ { "name": "fadeOut", "label": "Fade Out", "parameterMode": "duration-only", "duration": { "default": 0.4 } }, { "name": "show", "label": "Show", "parameterMode": "duration-only", "duration": { "default": 0.9 } } ], "targets": [] } }, { "name": "handdrawn-title", "type": "registry:block", "entry": "src/components/motionactor/handdrawn/title/index.ts", "family": "handdrawn", "kind": "primitive", "icon": "sparkles", "tags": [ "annotate", "emphasize", "title" ], "related": [], "intent": { "jobs": [ "orient", "reveal" ], "useWhen": "A chapter opens and the film wants a handmade voice for it — a title that is written rather than typeset.", "avoidWhen": "The film's register is premium or corporate; a marker title undercuts a polished grade the moment it appears.", "pairsWith": [ "handdrawn/underline", "ui/text-word-reveal" ], "energy": "measured" }, "title": "Title", "description": "Handwritten title with a marker sweep and squiggle underline.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/handdrawn" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "boil.amp", "groupName": "boil", "leafName": "amp", "kind": "number", "defaultValue": 1.4, "editable": true, "isReactive": false }, { "path": "boil.enabled", "groupName": "boil", "leafName": "enabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "boil.frameDrop", "groupName": "boil", "leafName": "frameDrop", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "boil.rot", "groupName": "boil", "leafName": "rot", "kind": "number", "defaultValue": 0.3, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.fontFamily", "groupName": "content", "leafName": "fontFamily", "kind": "string", "defaultValue": "\"Caveat\", ui-rounded, cursive", "editable": true, "isReactive": false }, { "path": "content.fontSize", "groupName": "content", "leafName": "fontSize", "kind": "number", "defaultValue": 120, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "palette", "groupName": null, "leafName": "palette", "kind": "object", "editable": false, "isReactive": false }, { "path": "pose", "groupName": null, "leafName": "pose", "kind": "object", "editable": false, "isReactive": false }, { "path": "style.scheme", "groupName": "style", "leafName": "scheme", "kind": "string", "defaultValue": "chalk", "editable": true, "isReactive": false }, { "path": "style.seed", "groupName": "style", "leafName": "seed", "kind": "number", "defaultValue": 8, "editable": true, "isReactive": false }, { "path": "style.sweep", "groupName": "style", "leafName": "sweep", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "style.underline", "groupName": "style", "leafName": "underline", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "sweepProgress", "groupName": null, "leafName": "sweepProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "textOpacity", "groupName": null, "leafName": "textOpacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "underlineDraw", "groupName": null, "leafName": "underlineDraw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "underlinePath", "groupName": null, "leafName": "underlinePath", "kind": "string", "editable": false, "isReactive": false } ], "commands": [ { "name": "fadeOut", "label": "Fade Out", "parameterMode": "duration-only", "duration": { "default": 0.4 } }, { "name": "show", "label": "Show", "parameterMode": "duration-only", "duration": { "default": 0.5 } } ], "targets": [] } }, { "name": "handdrawn-underline", "type": "registry:block", "entry": "src/components/motionactor/handdrawn/underline/index.ts", "family": "handdrawn", "kind": "primitive", "icon": "sparkles", "tags": [ "annotate", "emphasize", "text" ], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "One phrase in a held line of text is the phrase — the narration leans on it, and the mark should land exactly as it is spoken.", "avoidWhen": "Plain emphasis with no annotation gesture would do; underlining every other phrase turns the mark into a habit and kills its meaning.", "pairsWith": [ "ui/text-block", "handdrawn/arrow" ], "energy": "energetic" }, "title": "Underline", "description": "Squiggle, bracket or strike-through marker pass over a phrase.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/handdrawn" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "boil.amp", "groupName": "boil", "leafName": "amp", "kind": "number", "defaultValue": 1.6, "editable": true, "isReactive": false }, { "path": "boil.enabled", "groupName": "boil", "leafName": "enabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "boil.frameDrop", "groupName": "boil", "leafName": "frameDrop", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "boil.rot", "groupName": "boil", "leafName": "rot", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "draw", "groupName": null, "leafName": "draw", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "ink.color", "groupName": "ink", "leafName": "color", "kind": "color", "defaultValue": "#ffd66b", "editable": true, "isReactive": false }, { "path": "ink.soft", "groupName": "ink", "leafName": "soft", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "ink.strokeWidth", "groupName": "ink", "leafName": "strokeWidth", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "path", "groupName": null, "leafName": "path", "kind": "string", "editable": false, "isReactive": false }, { "path": "pose", "groupName": null, "leafName": "pose", "kind": "object", "editable": false, "isReactive": false }, { "path": "shape.seed", "groupName": "shape", "leafName": "seed", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "shape.style", "groupName": "shape", "leafName": "style", "kind": "string", "defaultValue": "underline", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [ { "name": "drawOn", "label": "Draw On", "parameterMode": "duration-only", "duration": { "default": 0.55 } }, { "name": "fadeOut", "label": "Fade Out", "parameterMode": "duration-only", "duration": { "default": 0.3 } } ], "targets": [] } }, { "name": "input-command-palette", "type": "registry:block", "entry": "src/components/motionactor/input/commandPalette/index.ts", "family": "input", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate" ], "useWhen": "The product's power is that you can just ask it — the palette opens, the query narrows the list, and the right command is already there.", "avoidWhen": "The feature is not actually reachable that way; faking a palette entry that does not exist is the demo lie viewers catch first.", "pairsWith": [ "ui/cursor", "code/code-editor" ], "energy": "energetic" }, "title": "Command Palette", "description": "Command Palette.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/input" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.breadcrumb", "groupName": "content", "leafName": "breadcrumb", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.commands", "groupName": "content", "leafName": "commands", "kind": "array", "defaultValue": [ { "label": "Go to File…", "subtitle": "Jump to any file by name", "icon": "file-text", "shortcut": "⌘P" }, { "label": "Search in Project", "subtitle": "Find text across the workspace", "icon": "search", "shortcut": "⌘⇧F" }, { "label": "Switch Branch…", "subtitle": "git · main", "icon": "git-branch", "shortcut": "⌃B" }, { "label": "Open Pull Request…", "subtitle": "github · 3 open", "icon": "git-pull-request", "shortcut": "⌃⌘P" }, { "label": "Open in Browser", "subtitle": "Preview the running build", "icon": "globe", "shortcut": "⌥⌘B" }, { "label": "Open Recent…", "subtitle": "Reopen a recent project", "icon": "history", "shortcut": "⌃R" }, { "label": "Run Build Task", "subtitle": "Compile the current target", "icon": "package", "shortcut": "⌘⇧B" }, { "label": "Open Settings", "subtitle": "Editor & workspace preferences", "icon": "sliders", "shortcut": "⌘," } ], "editable": false, "isReactive": false }, { "path": "content.open", "groupName": "content", "leafName": "open", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "content.query", "groupName": "content", "leafName": "query", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.selectedIndex", "groupName": "content", "leafName": "selectedIndex", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "content.selectionFromIndex", "groupName": "content", "leafName": "selectionFromIndex", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "content.selectionProgress", "groupName": "content", "leafName": "selectionProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "filteredCommands", "groupName": null, "leafName": "filteredCommands", "kind": "array", "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 420, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 760, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rows", "groupName": null, "leafName": "rows", "kind": "array", "editable": false, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "spotlight", "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "input-keyboard", "type": "registry:block", "entry": "src/components/motionactor/input/keyboard/index.ts", "family": "input", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate" ], "useWhen": "The shortcut is the point — the chord being pressed has to be visible, layer and all, not just the effect it produces.", "avoidWhen": "Only the outcome matters; showing the keyboard for ordinary typing slows a demo that could have cut straight to the result.", "pairsWith": [ "ui/cursor", "code/code-editor" ], "energy": "measured" }, "title": "Keyboard", "description": "Keyboard.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "@tabler/icons-react", "react" ], "registryDependencies": [], "exports": [ "@motionactor/input" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "backgroundColor", "groupName": null, "leafName": "backgroundColor", "kind": "color", "defaultValue": "rgb(190, 190, 190)", "editable": true, "isReactive": false }, { "path": "borderRadius", "groupName": null, "leafName": "borderRadius", "kind": "number", "defaultValue": 14, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "currentLayer", "groupName": null, "leafName": "currentLayer", "kind": "string", "defaultValue": "qwerty", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "initialLayer", "groupName": null, "leafName": "initialLayer", "kind": "string", "defaultValue": "qwerty", "editable": true, "isReactive": false }, { "path": "keyboardScale", "groupName": null, "leafName": "keyboardScale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "keys", "groupName": null, "leafName": "keys", "kind": "object", "defaultValue": { "esc": { "primary": "esc", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "backtick": { "primary": "~", "secondary": "`", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_1": { "primary": "!", "secondary": "1", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_2": { "primary": "@", "secondary": "2", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_3": { "primary": "#", "secondary": "3", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_4": { "primary": "$", "secondary": "4", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_5": { "primary": "%", "secondary": "5", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_6": { "primary": "^", "secondary": "6", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_7": { "primary": "&", "secondary": "7", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_8": { "primary": "*", "secondary": "8", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_9": { "primary": "(", "secondary": "9", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "num_0": { "primary": ")", "secondary": "0", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "minus": { "primary": "—", "secondary": "_", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "equals": { "primary": "+", "secondary": "=", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "delete": { "primary": "delete", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "tab": { "primary": "tab", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "q": { "primary": "Q", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "w": { "primary": "W", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "e": { "primary": "E", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "r": { "primary": "R", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "t": { "primary": "T", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "y": { "primary": "Y", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "u": { "primary": "U", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "i": { "primary": "I", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "o": { "primary": "O", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "p": { "primary": "P", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "left_bracket": { "primary": "{", "secondary": "[", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "right_bracket": { "primary": "}", "secondary": "]", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "backslash": { "primary": "|", "secondary": "\\", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "caps_lock": { "primary": "caps lock", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "a": { "primary": "A", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "s": { "primary": "S", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "d": { "primary": "D", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "f": { "primary": "F", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "g": { "primary": "G", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "h": { "primary": "H", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "j": { "primary": "J", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "k": { "primary": "K", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "l": { "primary": "L", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "semicolon": { "primary": ":", "secondary": ";", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "quote": { "primary": "\"", "secondary": "'", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "return": { "primary": "return", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "left_shift": { "primary": "shift", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "z": { "primary": "Z", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "x": { "primary": "X", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "c": { "primary": "C", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "v": { "primary": "V", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "b": { "primary": "B", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "n": { "primary": "N", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "m": { "primary": "M", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "comma": { "primary": "<", "secondary": ",", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "period": { "primary": ">", "secondary": ".", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "slash": { "primary": "?", "secondary": "/", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "right_shift": { "primary": "shift", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "fn": { "primary": "fn", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "control": { "primary": "control", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "option": { "primary": "option", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "left_command": { "primary": "command", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "space": { "primary": "", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "right_command": { "primary": "command", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "right_option": { "primary": "option", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "left_arrow": { "primary": "←", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "up_arrow": { "primary": "↑", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "right_arrow": { "primary": "→", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 }, "down_arrow": { "primary": "↓", "secondary": "", "tertiary": "", "color": "", "labelOpacity": 1, "highlight": 0, "press": 0 } }, "editable": false, "isReactive": true }, { "path": "layerColor", "groupName": null, "leafName": "layerColor", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "layerDefs", "groupName": null, "leafName": "layerDefs", "kind": "array", "defaultValue": [ { "name": "qwerty", "mappings": { "backtick": { "logicalKey": "backtick", "display": { "primary": "~", "secondary": "`" } }, "num_1": { "logicalKey": "num_1", "display": { "primary": "!", "secondary": "1" } }, "num_2": { "logicalKey": "num_2", "display": { "primary": "@", "secondary": "2" } }, "num_3": { "logicalKey": "num_3", "display": { "primary": "#", "secondary": "3" } }, "num_4": { "logicalKey": "num_4", "display": { "primary": "$", "secondary": "4" } }, "num_5": { "logicalKey": "num_5", "display": { "primary": "%", "secondary": "5" } }, "num_6": { "logicalKey": "num_6", "display": { "primary": "^", "secondary": "6" } }, "num_7": { "logicalKey": "num_7", "display": { "primary": "&", "secondary": "7" } }, "num_8": { "logicalKey": "num_8", "display": { "primary": "*", "secondary": "8" } }, "num_9": { "logicalKey": "num_9", "display": { "primary": "(", "secondary": "9" } }, "num_0": { "logicalKey": "num_0", "display": { "primary": ")", "secondary": "0" } }, "minus": { "logicalKey": "minus", "display": { "primary": "—", "secondary": "_" } }, "equals": { "logicalKey": "equals", "display": { "primary": "+", "secondary": "=" } }, "delete": { "logicalKey": "delete", "display": { "primary": "delete" } }, "tab": { "logicalKey": "tab", "display": { "primary": "tab" } }, "q": { "logicalKey": "q", "display": { "primary": "Q" } }, "w": { "logicalKey": "w", "display": { "primary": "W" } }, "e": { "logicalKey": "e", "display": { "primary": "E" } }, "r": { "logicalKey": "r", "display": { "primary": "R" } }, "t": { "logicalKey": "t", "display": { "primary": "T" } }, "y": { "logicalKey": "y", "display": { "primary": "Y" } }, "u": { "logicalKey": "u", "display": { "primary": "U" } }, "i": { "logicalKey": "i", "display": { "primary": "I" } }, "o": { "logicalKey": "o", "display": { "primary": "O" } }, "p": { "logicalKey": "p", "display": { "primary": "P" } }, "left_bracket": { "logicalKey": "left_bracket", "display": { "primary": "{", "secondary": "[" } }, "right_bracket": { "logicalKey": "right_bracket", "display": { "primary": "}", "secondary": "]" } }, "backslash": { "logicalKey": "backslash", "display": { "primary": "|", "secondary": "\\" } }, "caps_lock": { "logicalKey": "caps_lock", "display": { "primary": "caps lock" } }, "a": { "logicalKey": "a", "display": { "primary": "A" } }, "s": { "logicalKey": "s", "display": { "primary": "S" } }, "d": { "logicalKey": "d", "display": { "primary": "D" } }, "f": { "logicalKey": "f", "display": { "primary": "F" } }, "g": { "logicalKey": "g", "display": { "primary": "G" } }, "h": { "logicalKey": "h", "display": { "primary": "H" } }, "j": { "logicalKey": "j", "display": { "primary": "J" } }, "k": { "logicalKey": "k", "display": { "primary": "K" } }, "l": { "logicalKey": "l", "display": { "primary": "L" } }, "semicolon": { "logicalKey": "semicolon", "display": { "primary": ":", "secondary": ";" } }, "quote": { "logicalKey": "quote", "display": { "primary": "\"", "secondary": "'" } }, "return": { "logicalKey": "return", "display": { "primary": "return" } }, "left_shift": { "logicalKey": "shift", "display": { "primary": "shift" } }, "z": { "logicalKey": "z", "display": { "primary": "Z" } }, "x": { "logicalKey": "x", "display": { "primary": "X" } }, "c": { "logicalKey": "c", "display": { "primary": "C" } }, "v": { "logicalKey": "v", "display": { "primary": "V" } }, "b": { "logicalKey": "b", "display": { "primary": "B" } }, "n": { "logicalKey": "n", "display": { "primary": "N" } }, "m": { "logicalKey": "m", "display": { "primary": "M" } }, "comma": { "logicalKey": "comma", "display": { "primary": "<", "secondary": "," } }, "period": { "logicalKey": "period", "display": { "primary": ">", "secondary": "." } }, "slash": { "logicalKey": "slash", "display": { "primary": "?", "secondary": "/" } }, "right_shift": { "logicalKey": "shift", "display": { "primary": "shift" } }, "fn": { "logicalKey": "fn", "display": { "primary": "fn" } }, "control": { "logicalKey": "control", "display": { "primary": "control" } }, "option": { "logicalKey": "option", "display": { "primary": "option" } }, "left_command": { "logicalKey": "command", "display": { "primary": "command" } }, "space": { "logicalKey": "space", "display": { "primary": "" } }, "right_command": { "logicalKey": "command", "display": { "primary": "command" } }, "right_option": { "logicalKey": "option", "display": { "primary": "option" } }, "left_arrow": { "logicalKey": "arrow_left", "display": { "primary": "←" } }, "up_arrow": { "logicalKey": "arrow_up", "display": { "primary": "↑" } }, "down_arrow": { "logicalKey": "arrow_down", "display": { "primary": "↓" } }, "right_arrow": { "logicalKey": "arrow_right", "display": { "primary": "→" } }, "esc": { "logicalKey": "escape", "display": { "primary": "esc" } } } }, { "name": "vim", "inherits": "qwerty", "mappings": { "h": { "logicalKey": "arrow_left", "display": { "primary": "H", "secondary": "←" } }, "j": { "logicalKey": "arrow_down", "display": { "primary": "J", "secondary": "↓" } }, "k": { "logicalKey": "arrow_up", "display": { "primary": "K", "secondary": "↑" } }, "l": { "logicalKey": "arrow_right", "display": { "primary": "L", "secondary": "→" } }, "caps_lock": { "logicalKey": "escape", "display": { "primary": "ESC" } } } }, { "name": "symbols", "inherits": "qwerty", "mappings": { "num_1": { "logicalKey": "exclamation", "display": { "primary": "!" } }, "num_2": { "logicalKey": "at", "display": { "primary": "@" } }, "num_3": { "logicalKey": "hash", "display": { "primary": "#" } }, "num_4": { "logicalKey": "dollar", "display": { "primary": "$" } }, "num_5": { "logicalKey": "percent", "display": { "primary": "%" } }, "num_6": { "logicalKey": "caret", "display": { "primary": "^" } }, "num_7": { "logicalKey": "ampersand", "display": { "primary": "&" } }, "num_8": { "logicalKey": "asterisk", "display": { "primary": "*" } }, "num_9": { "logicalKey": "left_paren", "display": { "primary": "(" } }, "num_0": { "logicalKey": "right_paren", "display": { "primary": ")" } }, "minus": { "logicalKey": "underscore", "display": { "primary": "_" } }, "equals": { "logicalKey": "plus", "display": { "primary": "+" } }, "left_bracket": { "logicalKey": "left_brace", "display": { "primary": "{" } }, "right_bracket": { "logicalKey": "right_brace", "display": { "primary": "}" } }, "semicolon": { "logicalKey": "colon", "display": { "primary": ":" } }, "quote": { "logicalKey": "double_quote", "display": { "primary": "\"" } }, "comma": { "logicalKey": "left_angle", "display": { "primary": "<" } }, "period": { "logicalKey": "right_angle", "display": { "primary": ">" } }, "slash": { "logicalKey": "question", "display": { "primary": "?" } }, "backslash": { "logicalKey": "pipe", "display": { "primary": "|" } }, "backtick": { "logicalKey": "tilde", "display": { "primary": "~" } } } } ], "editable": false, "isReactive": false }, { "path": "layerLabel", "groupName": null, "leafName": "layerLabel", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "layers", "groupName": null, "leafName": "layers", "kind": "object", "defaultValue": {}, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "showLayerLabel", "groupName": null, "leafName": "showLayerLabel", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "string", "defaultValue": "light", "editable": true, "isReactive": false }, { "path": "trackpadTouchProgress", "groupName": null, "leafName": "trackpadTouchProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "trackpadTouchX", "groupName": null, "leafName": "trackpadTouchX", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "trackpadTouchY", "groupName": null, "leafName": "trackpadTouchY", "kind": "number", "defaultValue": 0.28, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "layout-flex-container", "type": "registry:block", "entry": "src/components/motionactor/layout/flexContainer/index.ts", "family": "layout", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "Several actors have to share one row or column and keep their relationship as items enter, leave or resize mid-scene.", "avoidWhen": "A single actor is being placed; positioning it directly is clearer than wrapping it in a container that will only ever hold one thing.", "pairsWith": [], "energy": "calm" }, "title": "Flex Container", "description": "Flex Container.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/layout" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layoutTransition.choreography", "groupName": "layoutTransition", "leafName": "choreography", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layoutTransition.duration", "groupName": "layoutTransition", "leafName": "duration", "kind": "number", "defaultValue": 0.45, "editable": true, "isReactive": false }, { "path": "layoutTransition.easing", "groupName": "layoutTransition", "leafName": "easing", "kind": "string", "defaultValue": "inOutCubic", "editable": true, "isReactive": false }, { "path": "layoutTransition.enabled", "groupName": "layoutTransition", "leafName": "enabled", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "layoutTransition.ghostChoreography", "groupName": "layoutTransition", "leafName": "ghostChoreography", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layoutTransition.ghostProgram", "groupName": "layoutTransition", "leafName": "ghostProgram", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layoutTransition.projectionMode", "groupName": "layoutTransition", "leafName": "projectionMode", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "layoutTransition.revision", "groupName": "layoutTransition", "leafName": "revision", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layoutTransition.sessionId", "groupName": "layoutTransition", "leafName": "sessionId", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layoutTransition.sourceAlignItems", "groupName": "layoutTransition", "leafName": "sourceAlignItems", "kind": "string", "defaultValue": "start", "editable": true, "isReactive": false }, { "path": "layoutTransition.sourceChildIds", "groupName": "layoutTransition", "leafName": "sourceChildIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "layoutTransition.sourceDirection", "groupName": "layoutTransition", "leafName": "sourceDirection", "kind": "string", "defaultValue": "column", "editable": true, "isReactive": false }, { "path": "layoutTransition.sourceJustifyContent", "groupName": "layoutTransition", "leafName": "sourceJustifyContent", "kind": "string", "defaultValue": "start", "editable": true, "isReactive": false }, { "path": "layoutTransition.sourcePhase", "groupName": "layoutTransition", "leafName": "sourcePhase", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layoutTransition.startFrame", "groupName": "layoutTransition", "leafName": "startFrame", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layoutTransition.targetChildIds", "groupName": "layoutTransition", "leafName": "targetChildIds", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "layoutTransition.targetPhase", "groupName": "layoutTransition", "leafName": "targetPhase", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "projectionProgress", "groupName": null, "leafName": "projectionProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "sizing", "groupName": null, "leafName": "sizing", "kind": "object", "defaultValue": { "direction": "column", "alignItems": "start", "justifyContent": "start", "gap": 0, "paddingX": 0, "paddingY": 0 }, "editable": false, "isReactive": true }, { "path": "target", "groupName": null, "leafName": "target", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "layout-kanban-board", "type": "registry:block", "entry": "src/components/motionactor/layout/kanbanBoard/index.ts", "family": "layout", "kind": "primitive", "tags": [ "board", "cards", "columns", "kanban" ], "related": [], "intent": { "jobs": [ "demonstrate", "orient" ], "useWhen": "The cards are actors in their own right (a badge, a chart, a screenshot) and the beat is one of them changing column or rank while the board reflows around it.", "avoidWhen": "The cards are plain tickets of title, tags and assignee; ui/kanban draws those itself with a board theme. A board whose cards never move is a layout, not a beat.", "pairsWith": [ "ui/badge", "ui/cursor" ], "energy": "measured" }, "title": "Kanban Board", "description": "Columns of hosted card actors. Moving a card, reordering a column, or several changes at once plays as one projected layout transition.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/layout" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "board.boardBackground", "groupName": "board", "leafName": "boardBackground", "kind": "color", "defaultValue": "#0f172a", "editable": true, "isReactive": false }, { "path": "board.cardBackground", "groupName": "board", "leafName": "cardBackground", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "board.cardBorder", "groupName": "board", "leafName": "cardBorder", "kind": "color", "defaultValue": "rgba(148, 163, 184, 0.3)", "editable": true, "isReactive": false }, { "path": "board.cardGap", "groupName": "board", "leafName": "cardGap", "kind": "number", "defaultValue": 12, "editable": true, "isReactive": false }, { "path": "board.cardHeight", "groupName": "board", "leafName": "cardHeight", "kind": "number", "defaultValue": 120, "editable": true, "isReactive": false }, { "path": "board.columnBackground", "groupName": "board", "leafName": "columnBackground", "kind": "color", "defaultValue": "rgba(15, 23, 42, 0.72)", "editable": true, "isReactive": false }, { "path": "board.columnBorder", "groupName": "board", "leafName": "columnBorder", "kind": "color", "defaultValue": "rgba(255,255,255,0.08)", "editable": true, "isReactive": false }, { "path": "board.columnGap", "groupName": "board", "leafName": "columnGap", "kind": "number", "defaultValue": 20, "editable": true, "isReactive": false }, { "path": "board.columnPadding", "groupName": "board", "leafName": "columnPadding", "kind": "number", "defaultValue": 14, "editable": true, "isReactive": false }, { "path": "board.columnRadius", "groupName": "board", "leafName": "columnRadius", "kind": "number", "defaultValue": 24, "editable": true, "isReactive": false }, { "path": "board.headerHeight", "groupName": "board", "leafName": "headerHeight", "kind": "number", "defaultValue": 64, "editable": true, "isReactive": false }, { "path": "board.paddingX", "groupName": "board", "leafName": "paddingX", "kind": "number", "defaultValue": 28, "editable": true, "isReactive": false }, { "path": "board.paddingY", "groupName": "board", "leafName": "paddingY", "kind": "number", "defaultValue": 28, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "projectionProgress", "groupName": null, "leafName": "projectionProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "sizing", "groupName": null, "leafName": "sizing", "kind": "object", "defaultValue": { "columns": [], "placements": {} }, "editable": false, "isReactive": false }, { "path": "target", "groupName": null, "leafName": "target", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "layout-parallax-stage", "type": "registry:block", "entry": "src/components/motionactor/layout/parallaxStage/index.ts", "family": "layout", "kind": "primitive", "tags": [ "camera", "depth", "parallax", "stills" ], "related": [], "intent": { "jobs": [ "orient", "exhibit", "bridge" ], "useWhen": "The only footage for a beat is a photograph, and it has to hold the screen while the narration runs — cutting it into depth plates and easing a camera through it gives a still the presence of a shot.", "avoidWhen": "The source is video, or the image cannot be separated into plates; running the rig over one flat layer is an ordinary Ken Burns zoom with extra machinery, and under-bled plates drag their own edges into frame.", "pairsWith": [ "handdrawn/callout-circle", "handdrawn/arrow" ], "energy": "calm" }, "title": "Parallax Stage", "description": "A virtual camera over depth-separated plates: a still cut into layers, pushed or panned so foreground and background drift at different rates.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/layout" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "camera.cameraX", "groupName": "camera", "leafName": "cameraX", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "camera.cameraY", "groupName": "camera", "leafName": "cameraY", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "camera.zoom", "groupName": "camera", "leafName": "zoom", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "cameraState", "groupName": null, "leafName": "cameraState", "kind": "object", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 1080, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1920, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rig.focalDepth", "groupName": "rig", "leafName": "focalDepth", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rig.strength", "groupName": "rig", "leafName": "strength", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [ { "name": "drift", "label": "Drift", "parameterMode": "params-duration", "params": { "x": { "kind": "number", "label": "Camera X" }, "y": { "kind": "number", "label": "Camera Y" }, "zoom": { "kind": "number", "label": "Zoom" } }, "duration": { "default": 8 } }, { "name": "focusOn", "label": "Focus On", "parameterMode": "params-duration", "params": { "focalDepth": { "kind": "number", "label": "Focal Depth" } }, "duration": { "default": 1.2 } }, { "name": "panAcross", "label": "Pan Across", "parameterMode": "params-duration", "params": { "x": { "kind": "number", "label": "Camera X" }, "y": { "kind": "number", "label": "Camera Y" } }, "duration": { "default": 4 } }, { "name": "pullBack", "label": "Pull Back", "parameterMode": "params-duration", "params": { "zoom": { "kind": "number", "label": "Zoom" } }, "duration": { "default": 4 } }, { "name": "pushIn", "label": "Push In", "parameterMode": "params-duration", "params": { "zoom": { "kind": "number", "label": "Zoom" } }, "duration": { "default": 4 } } ], "targets": [] } }, { "name": "media-audio", "type": "registry:block", "entry": "src/components/motionactor/media/audio/index.ts", "family": "media", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "A scene needs its own sound — a bed under the section, a sting on the cut — carried with the shot rather than mixed in afterwards.", "avoidWhen": "The sound belongs to the whole film rather than this beat; a per-scene clip that restarts on every cut is what makes a mix sound stitched.", "pairsWith": [ "media/audio-track", "media/audio-manager" ], "energy": "calm" }, "title": "Audio", "description": "Audio.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/media" ], "controls": { "fields": [ { "path": "content.source", "groupName": "content", "leafName": "source", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "playback.looping", "groupName": "playback", "leafName": "looping", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "playback.muted", "groupName": "playback", "leafName": "muted", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "playback.rate", "groupName": "playback", "leafName": "rate", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "playback.trimEnd", "groupName": "playback", "leafName": "trimEnd", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "playback.trimStart", "groupName": "playback", "leafName": "trimStart", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "playback.volume", "groupName": "playback", "leafName": "volume", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "media-audio-manager", "type": "registry:block", "entry": "src/components/motionactor/media/audioManager/index.ts", "family": "media", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate" ], "useWhen": "An interface demo should sound like itself — keys clicking, toasts landing — with cues bound to what the actors are actually doing.", "avoidWhen": "The narration is dense; UI foley under a talking voice fights it for the same frequencies and the demo simply sounds noisy.", "pairsWith": [ "input/keyboard", "ui/toast", "media/audio" ], "energy": "measured" }, "title": "Audio Manager", "description": "Audio Manager.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/media" ], "controls": { "fields": [ { "path": "enabled", "groupName": null, "leafName": "enabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "media-audio-track", "type": "registry:block", "entry": "src/components/motionactor/media/audioTrack/index.ts", "family": "media", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "Sound has to hit specific moments across a whole scene — a cue list that can be retimed as one thing when the edit moves.", "avoidWhen": "There is a single sound at a single moment; a cue track for one hit is bookkeeping, and media/audio plays it directly.", "pairsWith": [ "media/audio", "media/audio-manager" ], "energy": "calm" }, "title": "Audio Track", "description": "Audio Track.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/media" ], "controls": { "fields": [ { "path": "cues", "groupName": null, "leafName": "cues", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "media-image", "type": "registry:block", "entry": "src/components/motionactor/media/image/index.ts", "family": "media", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "exhibit" ], "useWhen": "A still needs to be on screen and framed deliberately — a focal point that survives the crop, held while the narration does its work.", "avoidWhen": "The subject moves, or the moment needs duration; a still where footage belongs reads as a placeholder nobody replaced.", "pairsWith": [ "fx-treatments/paper-texture", "handdrawn/photo-frame" ], "energy": "calm" }, "title": "Image", "description": "Image.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/media" ], "controls": { "fields": [ { "path": "appearance.backgroundColor", "groupName": "appearance", "leafName": "backgroundColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "appearance.cornerRadius", "groupName": "appearance", "leafName": "cornerRadius", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.fit", "groupName": "content", "leafName": "fit", "kind": "string", "defaultValue": "cover", "editable": true, "isReactive": false }, { "path": "content.focalPointX", "groupName": "content", "leafName": "focalPointX", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "content.focalPointY", "groupName": "content", "leafName": "focalPointY", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "content.source", "groupName": "content", "leafName": "source", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 320, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "objectPosition", "groupName": null, "leafName": "objectPosition", "kind": "string", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "media-television", "type": "registry:block", "entry": "src/components/motionactor/media/television/index.ts", "family": "media", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "exhibit" ], "useWhen": "The frame wants a period or broadcast register — a set standing in a room, channels being flipped, content arriving as transmission.", "avoidWhen": "The content needs to be read; tube curvature, static and tuning drift all cost legibility that a plain panel would have kept.", "pairsWith": [ "fx-treatments/crt", "fx-treatments/vintage" ], "energy": "measured" }, "title": "Television", "description": "Television.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/media" ], "controls": { "fields": [ { "path": "appearance.antennaLeft", "groupName": "appearance", "leafName": "antennaLeft", "kind": "number", "defaultValue": 45, "editable": true, "isReactive": false }, { "path": "appearance.antennaRight", "groupName": "appearance", "leafName": "antennaRight", "kind": "number", "defaultValue": 45, "editable": true, "isReactive": false }, { "path": "appearance.brightness", "groupName": "appearance", "leafName": "brightness", "kind": "number", "defaultValue": 80, "editable": true, "isReactive": false }, { "path": "appearance.flickerAmount", "groupName": "appearance", "leafName": "flickerAmount", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.magneticDistortion", "groupName": "appearance", "leafName": "magneticDistortion", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "chromaticOffset", "groupName": null, "leafName": "chromaticOffset", "kind": "number", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.channelContent", "groupName": "content", "leafName": "channelContent", "kind": "object", "defaultValue": { "type": "static" }, "editable": false, "isReactive": false }, { "path": "content.channels", "groupName": "content", "leafName": "channels", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.currentChannel", "groupName": "content", "leafName": "currentChannel", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 900, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1200, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "magneticSkew", "groupName": null, "leafName": "magneticSkew", "kind": "number", "editable": false, "isReactive": false }, { "path": "power.isPoweredOn", "groupName": "power", "leafName": "isPoweredOn", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "power.powerProgress", "groupName": "power", "leafName": "powerProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "powerScale", "groupName": null, "leafName": "powerScale", "kind": "object", "editable": false, "isReactive": false }, { "path": "screenFilter", "groupName": null, "leafName": "screenFilter", "kind": "object", "editable": false, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "walnut", "editable": true, "isReactive": false }, { "path": "theme", "groupName": null, "leafName": "theme", "kind": "object", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "tuning.channelChangeProgress", "groupName": "tuning", "leafName": "channelChangeProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "tuning.staticIntensity", "groupName": "tuning", "leafName": "staticIntensity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "tuning.tuningDrift", "groupName": "tuning", "leafName": "tuningDrift", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "media-video", "type": "registry:block", "entry": "src/components/motionactor/media/video/index.ts", "family": "media", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "exhibit", "demonstrate" ], "useWhen": "Real footage is the evidence — a capture of the product, a clip of the thing happening — playing inside the composition's own timing.", "avoidWhen": "A few stills would say it faster; embedded video that plays on past the point it made is where a tight film starts to sag.", "pairsWith": [ "browser/browser-panel", "media/audio" ], "energy": "measured" }, "title": "Video", "description": "Video.", "dependencies": [ "@motionactor/artifact-store", "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/media" ], "controls": { "fields": [ { "path": "appearance.backgroundColor", "groupName": "appearance", "leafName": "backgroundColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "appearance.border", "groupName": "appearance", "leafName": "border", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "appearance.boxShadow", "groupName": "appearance", "leafName": "boxShadow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "appearance.cornerRadius", "groupName": "appearance", "leafName": "cornerRadius", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.fit", "groupName": "content", "leafName": "fit", "kind": "string", "defaultValue": "cover", "editable": true, "isReactive": false }, { "path": "content.focalPointX", "groupName": "content", "leafName": "focalPointX", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "content.focalPointY", "groupName": "content", "leafName": "focalPointY", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "content.posterSource", "groupName": "content", "leafName": "posterSource", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "content.source", "groupName": "content", "leafName": "source", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 270, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 480, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "objectPosition", "groupName": null, "leafName": "objectPosition", "kind": "string", "editable": false, "isReactive": false }, { "path": "playback.looping", "groupName": "playback", "leafName": "looping", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "playback.muted", "groupName": "playback", "leafName": "muted", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "playback.rate", "groupName": "playback", "leafName": "rate", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "playback.trimEnd", "groupName": "playback", "leafName": "trimEnd", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "playback.trimStart", "groupName": "playback", "leafName": "trimStart", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "overlays-callout", "type": "registry:block", "entry": "src/components/motionactor/overlays/callout/index.ts", "family": "overlays", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "emphasize", "orient" ], "useWhen": "A specific region of another actor needs naming while it is on screen — a label with a leader drawn to the thing it names.", "avoidWhen": "Several regions need calling out at once; stacked leader lines cross and the frame becomes a diagram of its own annotations.", "pairsWith": [ "overlays/spotlight-overlay", "handdrawn/box-label" ], "energy": "measured" }, "title": "Callout", "description": "Callout.", "dependencies": [ "@motionactor/core", "@motionactor/handdrawn", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/shared", "@remotion/paths", "react" ], "registryDependencies": [], "exports": [ "@motionactor/overlays" ], "controls": { "fields": [ { "path": "anchor.x", "groupName": "anchor", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "anchor.y", "groupName": "anchor", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.emphasis", "groupName": "appearance", "leafName": "emphasis", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.offsetX", "groupName": "appearance", "leafName": "offsetX", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.offsetY", "groupName": "appearance", "leafName": "offsetY", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "appearance.renderStyle", "groupName": "appearance", "leafName": "renderStyle", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "appearance.side", "groupName": "appearance", "leafName": "side", "kind": "string", "defaultValue": "top", "editable": true, "isReactive": false }, { "path": "appearance.variant", "groupName": "appearance", "leafName": "variant", "kind": "string", "defaultValue": "label", "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.label", "groupName": "content", "leafName": "label", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.subtitle", "groupName": "content", "leafName": "subtitle", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "pen.boilAmp", "groupName": "pen", "leafName": "boilAmp", "kind": "number", "defaultValue": 1.6, "editable": true, "isReactive": false }, { "path": "pen.boilEnabled", "groupName": "pen", "leafName": "boilEnabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "pen.boilFrameDrop", "groupName": "pen", "leafName": "boilFrameDrop", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "pen.boilRot", "groupName": "pen", "leafName": "boilRot", "kind": "number", "defaultValue": 0.4, "editable": true, "isReactive": false }, { "path": "pen.seed", "groupName": "pen", "leafName": "seed", "kind": "number", "defaultValue": 9, "editable": true, "isReactive": false }, { "path": "pose", "groupName": null, "leafName": "pose", "kind": "object", "editable": false, "isReactive": false }, { "path": "presentation.progress", "groupName": "presentation", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "presentation.visible", "groupName": "presentation", "leafName": "visible", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "rect", "groupName": null, "leafName": "rect", "kind": "object", "editable": false, "isReactive": false }, { "path": "targetRect.height", "groupName": "targetRect", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "targetRect.width", "groupName": "targetRect", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "targetRect.x", "groupName": "targetRect", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "targetRect.y", "groupName": "targetRect", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "overlays-spotlight-overlay", "type": "registry:block", "entry": "src/components/motionactor/overlays/spotlightOverlay/index.ts", "family": "overlays", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "One region of a busy interface must be the only place the eye can go, with everything else dimmed rather than removed.", "avoidWhen": "The surrounding context is what makes the point; dimming it answers the question the audience is still in the middle of asking.", "pairsWith": [ "overlays/callout", "ui/cursor" ], "energy": "measured" }, "title": "Spotlight Overlay", "description": "Spotlight Overlay.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/overlays" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "backdropBlur", "groupName": null, "leafName": "backdropBlur", "kind": "number", "editable": false, "isReactive": false }, { "path": "blurAmount", "groupName": null, "leafName": "blurAmount", "kind": "number", "defaultValue": 5, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "dimOpacity", "groupName": null, "leafName": "dimOpacity", "kind": "number", "defaultValue": 0.68, "editable": true, "isReactive": false }, { "path": "feather", "groupName": null, "leafName": "feather", "kind": "number", "defaultValue": 14, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "focuses", "groupName": null, "leafName": "focuses", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "overlayOpacity", "groupName": null, "leafName": "overlayOpacity", "kind": "number", "editable": false, "isReactive": false }, { "path": "progress", "groupName": null, "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "regions", "groupName": null, "leafName": "regions", "kind": "array", "editable": false, "isReactive": false }, { "path": "revealFrom", "groupName": null, "leafName": "revealFrom", "kind": "object", "defaultValue": { "scale": 0 }, "editable": false, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "string", "defaultValue": "scrim", "editable": true, "isReactive": false }, { "path": "surroundClipPath", "groupName": null, "leafName": "surroundClipPath", "kind": "string", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "visible", "groupName": null, "leafName": "visible", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-book", "type": "registry:block", "entry": "src/components/motionactor/scene3d/book/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "exhibit", "reveal" ], "useWhen": "Content should read as pages — a story, a chapter break, a manual — with the turn itself carrying the transition between them.", "avoidWhen": "The material is not page-shaped; a 3D book wrapped around a dashboard is a metaphor the audience has to work to forgive.", "pairsWith": [ "fx-reveals/page-curl", "media/image" ], "energy": "calm" }, "title": "Book", "description": "Book.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@react-three/drei", "@react-three/fiber", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "borderRadius", "groupName": null, "leafName": "borderRadius", "kind": "number", "defaultValue": 14, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "coverColor", "groupName": null, "leafName": "coverColor", "kind": "color", "defaultValue": "#5b1a1a", "editable": true, "isReactive": false }, { "path": "currentPage", "groupName": null, "leafName": "currentPage", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "flipDirection", "groupName": null, "leafName": "flipDirection", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flipProgress", "groupName": null, "leafName": "flipProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "height", "groupName": null, "leafName": "height", "kind": "number", "defaultValue": 640, "editable": true, "isReactive": false }, { "path": "highlights", "groupName": null, "leafName": "highlights", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "openProgress", "groupName": null, "leafName": "openProgress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "pageColor", "groupName": null, "leafName": "pageColor", "kind": "color", "defaultValue": "#f3e9d2", "editable": true, "isReactive": false }, { "path": "pageRenderMode", "groupName": null, "leafName": "pageRenderMode", "kind": "string", "defaultValue": "plain", "editable": true, "isReactive": false }, { "path": "pages", "groupName": null, "leafName": "pages", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "classic", "editable": true, "isReactive": false }, { "path": "targetPage", "groupName": null, "leafName": "targetPage", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "width", "groupName": null, "leafName": "width", "kind": "number", "defaultValue": 980, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-image-explosion", "type": "registry:block", "entry": "src/components/motionactor/scene3d/imageExplosion/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "celebrate", "reveal" ], "useWhen": "An image should arrive or leave as an event — particles converging into the hero shot, or the shot blowing apart on a beat.", "avoidWhen": "The register is sober, or the image carries detail that must be read; particles make it unreadable at exactly the moment it lands.", "pairsWith": [ "ui/particle-text", "fx-emphasis/glow" ], "energy": "energetic" }, "title": "Image Explosion", "description": "Image Explosion.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "@motionactor/three", "@react-three/drei", "@react-three/fiber", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "content.imageUrl", "groupName": "content", "leafName": "imageUrl", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "particles.count", "groupName": "particles", "leafName": "count", "kind": "number", "defaultValue": 500, "editable": true, "isReactive": false }, { "path": "particles.force", "groupName": "particles", "leafName": "force", "kind": "number", "defaultValue": 8, "editable": true, "isReactive": false }, { "path": "particles.glow", "groupName": "particles", "leafName": "glow", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "particles.randomness", "groupName": "particles", "leafName": "randomness", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "particles.shape", "groupName": "particles", "leafName": "shape", "kind": "string", "defaultValue": "round", "editable": true, "isReactive": false }, { "path": "particles.size", "groupName": "particles", "leafName": "size", "kind": "number", "defaultValue": 0.08, "editable": true, "isReactive": false }, { "path": "position.x", "groupName": "position", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.y", "groupName": "position", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.z", "groupName": "position", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.behavior", "groupName": "reveal", "leafName": "behavior", "kind": "string", "defaultValue": "burst", "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.x", "groupName": "rotation", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.y", "groupName": "rotation", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.z", "groupName": "rotation", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "scale.x", "groupName": "scale", "leafName": "x", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.y", "groupName": "scale", "leafName": "y", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.z", "groupName": "scale", "leafName": "z", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "string", "defaultValue": "shatter", "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-image-gallery", "type": "registry:block", "entry": "src/components/motionactor/scene3d/imageGallery/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "exhibit" ], "useWhen": "Several images are one body of work and should be seen as a set moving through space — a portfolio, a range, a series.", "avoidWhen": "One image carries the story; a gallery spreads attention across everything except the frame that was needed.", "pairsWith": [ "media/image", "scene3d/scene3d" ], "energy": "measured" }, "title": "Image Gallery", "description": "Image Gallery.", "dependencies": [ "@motionactor/core", "@motionactor/effects-three", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/three", "@react-three/drei", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "arrangement", "groupName": null, "leafName": "arrangement", "kind": "string", "defaultValue": "film-strip", "editable": true, "isReactive": false }, { "path": "cardPositions", "groupName": null, "leafName": "cardPositions", "kind": "array", "editable": false, "isReactive": false }, { "path": "cardRotations", "groupName": null, "leafName": "cardRotations", "kind": "array", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.cards", "groupName": "content", "leafName": "cards", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "framing.offset", "groupName": "framing", "leafName": "offset", "kind": "number", "defaultValue": 8, "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.effects", "groupName": "reveal", "leafName": "effects", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "surface.backgroundColor", "groupName": "surface", "leafName": "backgroundColor", "kind": "color", "defaultValue": "#0a0a0a", "editable": true, "isReactive": false }, { "path": "surface.borderRadius", "groupName": "surface", "leafName": "borderRadius", "kind": "number", "defaultValue": 16, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-media-panel3d", "type": "registry:block", "entry": "src/components/motionactor/scene3d/mediaPanel3d/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "exhibit" ], "useWhen": "Media should sit in the 3D scene as a physical object — framed, lit and angled along with the rest of the set.", "avoidWhen": "The composition is flat everywhere else; one perspective panel in a 2D layout looks like a mistake rather than a choice.", "pairsWith": [ "scene3d/scene3d", "media/video" ], "energy": "calm" }, "title": "Media Panel3d", "description": "Media Panel3d.", "dependencies": [ "@motionactor/core", "@motionactor/effects-three", "@motionactor/renderers", "@motionactor/three", "@react-three/drei", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "borderColor", "groupName": null, "leafName": "borderColor", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "borderOpacity", "groupName": null, "leafName": "borderOpacity", "kind": "number", "defaultValue": 0.08, "editable": true, "isReactive": false }, { "path": "borderScale", "groupName": null, "leafName": "borderScale", "kind": "number", "defaultValue": 1.015, "editable": true, "isReactive": false }, { "path": "cornerRadius", "groupName": null, "leafName": "cornerRadius", "kind": "number", "defaultValue": 0.18, "editable": true, "isReactive": false }, { "path": "fit", "groupName": null, "leafName": "fit", "kind": "string", "defaultValue": "cover", "editable": true, "isReactive": false }, { "path": "frameMetalness", "groupName": null, "leafName": "frameMetalness", "kind": "number", "defaultValue": 0.12, "editable": true, "isReactive": false }, { "path": "frameRoughness", "groupName": null, "leafName": "frameRoughness", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "glowColor", "groupName": null, "leafName": "glowColor", "kind": "color", "defaultValue": "#60a5fa", "editable": true, "isReactive": false }, { "path": "glowOpacity", "groupName": null, "leafName": "glowOpacity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "height", "groupName": null, "leafName": "height", "kind": "number", "defaultValue": 4, "editable": true, "isReactive": false }, { "path": "mediaKind", "groupName": null, "leafName": "mediaKind", "kind": "string", "defaultValue": "color", "editable": true, "isReactive": false }, { "path": "mediaSrc", "groupName": null, "leafName": "mediaSrc", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "position.x", "groupName": "position", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.y", "groupName": "position", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.z", "groupName": "position", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "posterSrc", "groupName": null, "leafName": "posterSrc", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "rotation.x", "groupName": "rotation", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.y", "groupName": "rotation", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.z", "groupName": "rotation", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "scale.x", "groupName": "scale", "leafName": "x", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.y", "groupName": "scale", "leafName": "y", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.z", "groupName": "scale", "leafName": "z", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "string", "defaultValue": "gallery", "editable": true, "isReactive": false }, { "path": "width", "groupName": null, "leafName": "width", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-model3d", "type": "registry:block", "entry": "src/components/motionactor/scene3d/model3d/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "exhibit", "demonstrate" ], "useWhen": "The subject is a real object and its form matters — turn it, open it, show the side a photograph could never show.", "avoidWhen": "The product is software; a spinning 3D asset standing in for an app is the oldest filler shot there is.", "pairsWith": [ "scene3d/scene3d", "overlays/callout" ], "energy": "measured" }, "title": "Model3d", "description": "Model3d.", "dependencies": [ "@motionactor/core", "@motionactor/effects-three", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/three", "@react-three/drei", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "animations", "groupName": null, "leafName": "animations", "kind": "object", "defaultValue": {}, "editable": false, "isReactive": false }, { "path": "crossFade", "groupName": null, "leafName": "crossFade", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "playback", "groupName": null, "leafName": "playback", "kind": "object", "defaultValue": { "clip": null, "mode": "time", "value": 0, "rate": 1, "direction": "forward", "loop": "repeat" }, "editable": false, "isReactive": true }, { "path": "position.x", "groupName": "position", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.y", "groupName": "position", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.z", "groupName": "position", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.x", "groupName": "rotation", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.y", "groupName": "rotation", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.z", "groupName": "rotation", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "scale.x", "groupName": "scale", "leafName": "x", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.y", "groupName": "scale", "leafName": "y", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.z", "groupName": "scale", "leafName": "z", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "src", "groupName": null, "leafName": "src", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-scene3d", "type": "registry:block", "entry": "src/components/motionactor/scene3d/scene3d/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient" ], "useWhen": "Several elements have to share one camera and one lighting rig, so depth and parallax stay consistent between them.", "avoidWhen": "Only one 3D element appears and it never moves relative to the camera; the stage costs setup a flat composition would not.", "pairsWith": [ "scene3d/model3d", "scene3d/text3d" ], "energy": "calm" }, "title": "Scene3d", "description": "Scene3d.", "dependencies": [ "@motionactor/core", "@motionactor/effects-three", "@motionactor/physics", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/shared", "@motionactor/three", "@react-three/drei", "@react-three/fiber", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "backgroundColor", "groupName": null, "leafName": "backgroundColor", "kind": "color", "defaultValue": "#020617", "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "height", "groupName": null, "leafName": "height", "kind": "number", "defaultValue": 900, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "width", "groupName": null, "leafName": "width", "kind": "number", "defaultValue": 1600, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-text3d", "type": "registry:block", "entry": "src/components/motionactor/scene3d/text3d/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "celebrate", "emphasize" ], "useWhen": "A word should have mass — a title with depth and bevel that the light already in the scene actually touches.", "avoidWhen": "The line is long or informational; extruded type is slow to read and every extra word costs more than it earns.", "pairsWith": [ "scene3d/scene3d", "fx-treatments/gloss" ], "energy": "energetic" }, "title": "Text3d", "description": "Text3d.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/three", "@react-three/drei", "react" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "bevelEnabled", "groupName": null, "leafName": "bevelEnabled", "kind": "boolean", "defaultValue": true, "editable": true, "isReactive": false }, { "path": "bevelSize", "groupName": null, "leafName": "bevelSize", "kind": "number", "defaultValue": 0.03, "editable": true, "isReactive": false }, { "path": "bevelThickness", "groupName": null, "leafName": "bevelThickness", "kind": "number", "defaultValue": 0.02, "editable": true, "isReactive": false }, { "path": "color", "groupName": null, "leafName": "color", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "depth", "groupName": null, "leafName": "depth", "kind": "number", "defaultValue": 0.3, "editable": true, "isReactive": false }, { "path": "emissive", "groupName": null, "leafName": "emissive", "kind": "color", "defaultValue": "#000000", "editable": true, "isReactive": false }, { "path": "emissiveIntensity", "groupName": null, "leafName": "emissiveIntensity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "finish", "groupName": null, "leafName": "finish", "kind": "string", "defaultValue": "chrome", "editable": true, "isReactive": false }, { "path": "fontSrc", "groupName": null, "leafName": "fontSrc", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "metalness", "groupName": null, "leafName": "metalness", "kind": "number", "defaultValue": 0.35, "editable": true, "isReactive": false }, { "path": "opacity", "groupName": null, "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "position.x", "groupName": "position", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.y", "groupName": "position", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "position.z", "groupName": "position", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.x", "groupName": "rotation", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.y", "groupName": "rotation", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "rotation.z", "groupName": "rotation", "leafName": "z", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "roughness", "groupName": null, "leafName": "roughness", "kind": "number", "defaultValue": 0.45, "editable": true, "isReactive": false }, { "path": "scale.x", "groupName": "scale", "leafName": "x", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.y", "groupName": "scale", "leafName": "y", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "scale.z", "groupName": "scale", "leafName": "z", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "size", "groupName": null, "leafName": "size", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "text", "groupName": null, "leafName": "text", "kind": "string", "defaultValue": "TITLE", "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "scene3d-tunnel", "type": "registry:block", "entry": "src/components/motionactor/scene3d/tunnel/index.ts", "family": "scene3d", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "bridge", "orient" ], "useWhen": "Travel is the transition — being pulled from one place in the story to the next, with the passage itself covering the cut.", "avoidWhen": "The two sides are calm and closely related; a tunnel flight between adjacent ideas is a very big gesture for a very small distance.", "pairsWith": [ "scene3d/scene3d", "fx-reveals/dissolve" ], "energy": "energetic" }, "title": "Tunnel", "description": "Tunnel.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/three", "@react-three/drei", "@react-three/fiber", "react", "three" ], "registryDependencies": [], "exports": [ "@motionactor/scene3d" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "backgroundColor", "groupName": null, "leafName": "backgroundColor", "kind": "color", "defaultValue": "#030712", "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "height", "groupName": null, "leafName": "height", "kind": "number", "defaultValue": 900, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "path", "groupName": null, "leafName": "path", "kind": "object", "defaultValue": { "segments": [], "radius": 100, "segmentsPerMeter": 2 }, "editable": false, "isReactive": true }, { "path": "pattern", "groupName": null, "leafName": "pattern", "kind": "object", "defaultValue": { "type": "rings", "density": 10, "color": "#3b82f6", "secondaryColor": "#1e40af", "glow": true, "scrollSpeed": 1, "rotationSpeed": 0 }, "editable": false, "isReactive": true }, { "path": "portals", "groupName": null, "leafName": "portals", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "neon", "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "transition", "groupName": null, "leafName": "transition", "kind": "object", "defaultValue": { "active": false, "portalId": null, "progress": 0, "targetPath": null, "targetPattern": null }, "editable": false, "isReactive": true }, { "path": "travel", "groupName": null, "leafName": "travel", "kind": "object", "defaultValue": { "position": 0, "lookAhead": 0.1 }, "editable": false, "isReactive": true }, { "path": "warp", "groupName": null, "leafName": "warp", "kind": "object", "defaultValue": { "speedIntensity": 0, "realityIntensity": 0, "pulse": 0 }, "editable": false, "isReactive": true }, { "path": "width", "groupName": null, "leafName": "width", "kind": "number", "defaultValue": 1600, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "timelines-historical-timeline", "type": "registry:block", "entry": "src/components/motionactor/timelines/historicalTimeline/index.ts", "family": "timelines", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "bridge" ], "useWhen": "Events have an order and the distance between them matters — a history, a roadmap, the years it took to get to the thing being announced.", "avoidWhen": "The sequence is a short list of steps with no real time axis; a timeline implies duration the story does not actually have.", "pairsWith": [ "ui/text-block", "overlays/callout" ], "energy": "measured" }, "title": "Historical Timeline", "description": "Historical Timeline.", "dependencies": [ "@chenglou/pretext", "@motionactor/core", "@motionactor/remotion", "@motionactor/renderers", "@motionactor/shared", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/timelines" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "axis", "groupName": null, "leafName": "axis", "kind": "object", "editable": false, "isReactive": false }, { "path": "camera", "groupName": null, "leafName": "camera", "kind": "object", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.events", "groupName": "content", "leafName": "events", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.title", "groupName": "content", "leafName": "title", "kind": "string", "defaultValue": "Historical Timeline", "editable": true, "isReactive": false }, { "path": "eventPlacement", "groupName": null, "leafName": "eventPlacement", "kind": "string", "defaultValue": "alternate", "editable": true, "isReactive": false }, { "path": "events", "groupName": null, "leafName": "events", "kind": "array", "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "focus.activeEventId", "groupName": "focus", "leafName": "activeEventId", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "focus.date", "groupName": "focus", "leafName": "date", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "focus.fromDate", "groupName": "focus", "leafName": "fromDate", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "focus.progress", "groupName": "focus", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "focusIndicator", "groupName": null, "leafName": "focusIndicator", "kind": "json", "editable": false, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 760, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1320, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "orientation", "groupName": null, "leafName": "orientation", "kind": "string", "defaultValue": "horizontal", "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "archive", "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "object", "editable": false, "isReactive": false }, { "path": "ticks", "groupName": null, "leafName": "ticks", "kind": "array", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "viewport.focusZoom", "groupName": "viewport", "leafName": "focusZoom", "kind": "number", "defaultValue": 1.5, "editable": true, "isReactive": false }, { "path": "viewport.zoom", "groupName": "viewport", "leafName": "zoom", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "window.visibleEndTime", "groupName": "window", "leafName": "visibleEndTime", "kind": "number", "defaultValue": 1704067200000, "editable": true, "isReactive": false }, { "path": "window.visibleStartTime", "groupName": "window", "leafName": "visibleStartTime", "kind": "number", "defaultValue": 1514764800000, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-badge", "type": "registry:block", "entry": "src/components/motionactor/ui/badge/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "emphasize" ], "useWhen": "A small piece of status has to be attached to something already on screen — new, beta, failed — and read at a glance.", "avoidWhen": "The status is the story; a badge is a footnote, and a beat that turns on it wants ui/toast or a line of text instead.", "pairsWith": [ "ui/toast", "ui/kanban" ], "energy": "calm" }, "title": "Badge", "description": "Badge.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.label", "groupName": "content", "leafName": "label", "kind": "string", "defaultValue": "STATUS", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 48, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 180, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.background", "groupName": "palette", "leafName": "background", "kind": "color", "defaultValue": "#101827", "editable": true, "isReactive": false }, { "path": "palette.base", "groupName": "palette", "leafName": "base", "kind": "color", "defaultValue": "#a3e635", "editable": true, "isReactive": false }, { "path": "palette.border", "groupName": "palette", "leafName": "border", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.ring", "groupName": "palette", "leafName": "ring", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "variant", "groupName": null, "leafName": "variant", "kind": "string", "defaultValue": "neon", "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-build-queue", "type": "registry:block", "entry": "src/components/motionactor/ui/buildQueue/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate", "prove" ], "useWhen": "Work being chewed through is the point — tasks ticking off one after another while the narration talks about speed.", "avoidWhen": "Nothing completes on camera; a queue that only sits there argues that the system is stuck rather than fast.", "pairsWith": [ "code/terminal", "ui/progress-bar" ], "energy": "measured" }, "title": "Build Queue", "description": "Build Queue.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/test-utils", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.phases", "groupName": "content", "leafName": "phases", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "content.subtitle", "groupName": "content", "leafName": "subtitle", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.title", "groupName": "content", "leafName": "title", "kind": "string", "defaultValue": "Build queue", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 420, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 540, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "spacing.listOffsetY", "groupName": "spacing", "leafName": "listOffsetY", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "string", "defaultValue": "paper", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-cursor", "type": "registry:block", "entry": "src/components/motionactor/ui/cursor/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate" ], "useWhen": "Someone is using the thing and the audience should feel a hand — the pointer travelling, hovering, committing to a click.", "avoidWhen": "No interaction is being shown; a cursor drifting over a static frame is motion without intent and reads as an idle screen recording.", "pairsWith": [ "browser/browser-panel", "input/command-palette" ], "energy": "measured" }, "title": "Cursor", "description": "Cursor.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "interaction.clicking", "groupName": "interaction", "leafName": "clicking", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 28, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 24, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.base", "groupName": "palette", "leafName": "base", "kind": "color", "defaultValue": "#22d3ee", "editable": true, "isReactive": false }, { "path": "skin", "groupName": null, "leafName": "skin", "kind": "string", "defaultValue": "arrow", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-kanban", "type": "registry:block", "entry": "src/components/motionactor/ui/kanban/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate", "orient" ], "useWhen": "Work moving between states is the story — a card crossing from doing to done exactly as the narration says it did.", "avoidWhen": "The board is decoration for a general claim about productivity; a full board no card ever crosses is a screenshot.", "pairsWith": [ "ui/badge", "ui/cursor" ], "energy": "measured" }, "title": "Kanban", "description": "Kanban.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "board.columns", "groupName": "board", "leafName": "columns", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "board.filter", "groupName": "board", "leafName": "filter", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "board.tickets", "groupName": "board", "leafName": "tickets", "kind": "array", "defaultValue": [], "editable": false, "isReactive": true }, { "path": "card.padding", "groupName": "card", "leafName": "padding", "kind": "number", "defaultValue": 24, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 600, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1200, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "spacing.columnGap", "groupName": "spacing", "leafName": "columnGap", "kind": "number", "defaultValue": 24, "editable": true, "isReactive": false }, { "path": "spacing.headerHeight", "groupName": "spacing", "leafName": "headerHeight", "kind": "number", "defaultValue": 54, "editable": true, "isReactive": false }, { "path": "spacing.ticketGap", "groupName": "spacing", "leafName": "ticketGap", "kind": "number", "defaultValue": 16, "editable": true, "isReactive": false }, { "path": "spacing.ticketHeight", "groupName": "spacing", "leafName": "ticketHeight", "kind": "number", "defaultValue": 120, "editable": true, "isReactive": false }, { "path": "style", "groupName": null, "leafName": "style", "kind": "string", "defaultValue": "brutalist", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-particle-morph", "type": "registry:block", "entry": "src/components/motionactor/ui/particleMorph/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "bridge", "reveal" ], "useWhen": "One shape has to become another and the becoming is the idea — data turning into a product, a mark forming out of noise.", "avoidWhen": "The two shapes have nothing to do with each other; a morph asserts a relationship, and asserting a false one is worse than a cut.", "pairsWith": [ "ui/particle-text", "scene3d/image-explosion" ], "energy": "energetic" }, "title": "Particle Morph", "description": "Particle Morph.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "bloom.glow", "groupName": "bloom", "leafName": "glow", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "bloom.trailAlpha", "groupName": "bloom", "leafName": "trailAlpha", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 1080, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1920, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "morph.distance", "groupName": "morph", "leafName": "distance", "kind": "number", "defaultValue": 100, "editable": true, "isReactive": false }, { "path": "morph.progress", "groupName": "morph", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "morph.source", "groupName": "morph", "leafName": "source", "kind": "object", "defaultValue": { "kind": "text", "text": "" }, "editable": false, "isReactive": false }, { "path": "morph.target", "groupName": "morph", "leafName": "target", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.background", "groupName": "palette", "leafName": "background", "kind": "string", "defaultValue": "transparent", "editable": true, "isReactive": false }, { "path": "particle.shape", "groupName": "particle", "leafName": "shape", "kind": "string", "defaultValue": "circle", "editable": true, "isReactive": false }, { "path": "particle.size", "groupName": "particle", "leafName": "size", "kind": "number", "defaultValue": 4, "editable": true, "isReactive": false }, { "path": "reveal.imageReveal", "groupName": "reveal", "leafName": "imageReveal", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.rippleDuration", "groupName": "reveal", "leafName": "rippleDuration", "kind": "number", "defaultValue": 1.5, "editable": true, "isReactive": false }, { "path": "reveal.rippleLead", "groupName": "reveal", "leafName": "rippleLead", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.rippleOriginX", "groupName": "reveal", "leafName": "rippleOriginX", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.rippleOriginY", "groupName": "reveal", "leafName": "rippleOriginY", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.rippleReveal", "groupName": "reveal", "leafName": "rippleReveal", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.rippleWaveSeconds", "groupName": "reveal", "leafName": "rippleWaveSeconds", "kind": "number", "defaultValue": 0.5, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-particle-text", "type": "registry:block", "entry": "src/components/motionactor/ui/particleText/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "reveal", "celebrate" ], "useWhen": "A short line deserves a materialize moment — a name assembling out of a particle field at the instant it is spoken.", "avoidWhen": "The register is sober enterprise, or the line is a whole sentence; particle type is a flourish that only survives at a few words.", "pairsWith": [ "ui/particle-morph", "fx-emphasis/glow" ], "energy": "energetic" }, "title": "Particle Text", "description": "Particle Text.", "dependencies": [ "@motionactor/core", "@motionactor/renderers", "@motionactor/shared", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "bloom.glow", "groupName": "bloom", "leafName": "glow", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "bloom.trailAlpha", "groupName": "bloom", "leafName": "trailAlpha", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 1080, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1920, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.background", "groupName": "palette", "leafName": "background", "kind": "string", "defaultValue": "transparent", "editable": true, "isReactive": false }, { "path": "palette.primary", "groupName": "palette", "leafName": "primary", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "palette.secondary", "groupName": "palette", "leafName": "secondary", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "particles.effect", "groupName": "particles", "leafName": "effect", "kind": "string", "defaultValue": "dissolve-in", "editable": true, "isReactive": false }, { "path": "particles.explosionForce", "groupName": "particles", "leafName": "explosionForce", "kind": "number", "defaultValue": 200, "editable": true, "isReactive": false }, { "path": "particles.progress", "groupName": "particles", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "particles.scatterAmount", "groupName": "particles", "leafName": "scatterAmount", "kind": "number", "defaultValue": 300, "editable": true, "isReactive": false }, { "path": "particles.shape", "groupName": "particles", "leafName": "shape", "kind": "string", "defaultValue": "circle", "editable": true, "isReactive": false }, { "path": "particles.size", "groupName": "particles", "leafName": "size", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontSize", "groupName": "typography", "leafName": "fontSize", "kind": "number", "defaultValue": 150, "editable": true, "isReactive": false }, { "path": "typography.sampleSpacing", "groupName": "typography", "leafName": "sampleSpacing", "kind": "number", "defaultValue": 8, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-progress-bar", "type": "registry:block", "entry": "src/components/motionactor/ui/progressBar/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "prove", "demonstrate" ], "useWhen": "A quantity has to land as a proportion — percent complete, capacity used, how far past a target something got.", "avoidWhen": "Several quantities are being compared; parallel bars in a widget are a chart in disguise and charts/bar-chart draws it properly.", "pairsWith": [ "ui/build-queue", "ui/text-block" ], "energy": "calm" }, "title": "Progress Bar", "description": "Progress Bar.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "card.borderRadius", "groupName": "card", "leafName": "borderRadius", "kind": "number", "defaultValue": 8, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.label", "groupName": "content", "leafName": "label", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 40, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 920, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.base", "groupName": "palette", "leafName": "base", "kind": "color", "defaultValue": "#22d3ee", "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "variant", "groupName": null, "leafName": "variant", "kind": "string", "defaultValue": "neon", "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-scramble-reveal", "type": "registry:block", "entry": "src/components/motionactor/ui/scrambleReveal/index.ts", "family": "ui", "kind": "primitive", "tags": [ "reveal", "terminal", "text" ], "related": [], "intent": { "jobs": [ "reveal", "agitate" ], "useWhen": "A name, a codeword or a result should arrive as something that had to be worked out — the narration says it was decrypted, traced or identified, and the frame resolves it out of noise rather than simply printing it.", "avoidWhen": "The word was never in doubt; churning glyphs in front of an ordinary label manufacture suspense the script did not earn, and read as a screensaver.", "pairsWith": [ "ui/text-block" ], "energy": "energetic" }, "title": "Scramble Reveal", "description": "A string resolving left to right out of deterministic wrong glyphs, in a terminal, clean or matrix skin.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.glow", "groupName": "appearance", "leafName": "glow", "kind": "string", "defaultValue": "standard", "editable": true, "isReactive": false }, { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "appearance.renderStyle", "groupName": "appearance", "leafName": "renderStyle", "kind": "string", "defaultValue": "terminal", "editable": true, "isReactive": false }, { "path": "cells", "groupName": null, "leafName": "cells", "kind": "array", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "HYPERFRAMES", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 260, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1200, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "lockPoints", "groupName": null, "leafName": "lockPoints", "kind": "array", "editable": false, "isReactive": false }, { "path": "palette.accent", "groupName": "palette", "leafName": "accent", "kind": "color", "defaultValue": "#71f5a7", "editable": true, "isReactive": false }, { "path": "palette.surface", "groupName": "palette", "leafName": "surface", "kind": "color", "defaultValue": "#0b1016", "editable": true, "isReactive": false }, { "path": "palette.text", "groupName": "palette", "leafName": "text", "kind": "color", "defaultValue": "#f8fafc", "editable": true, "isReactive": false }, { "path": "scramble.churn", "groupName": "scramble", "leafName": "churn", "kind": "number", "defaultValue": 24, "editable": true, "isReactive": false }, { "path": "scramble.firstLock", "groupName": "scramble", "leafName": "firstLock", "kind": "number", "defaultValue": 0.12, "editable": true, "isReactive": false }, { "path": "scramble.glyphSet", "groupName": "scramble", "leafName": "glyphSet", "kind": "string", "defaultValue": "symbols", "editable": true, "isReactive": false }, { "path": "scramble.progress", "groupName": "scramble", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "scramble.seed", "groupName": "scramble", "leafName": "seed", "kind": "number", "defaultValue": 666959854, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontFamily", "groupName": "typography", "leafName": "fontFamily", "kind": "string", "defaultValue": "ui-monospace, \"SF Mono\", Menlo, Consolas, monospace", "editable": true, "isReactive": false }, { "path": "typography.fontSize", "groupName": "typography", "leafName": "fontSize", "kind": "number", "defaultValue": 84, "editable": true, "isReactive": false }, { "path": "typography.letterSpacing", "groupName": "typography", "leafName": "letterSpacing", "kind": "number", "defaultValue": 0.055, "editable": true, "isReactive": false } ], "commands": [ { "name": "revealText", "label": "Reveal Text", "parameterMode": "duration-only", "duration": { "default": 1.65 } }, { "name": "scrambleOut", "label": "Scramble Out", "parameterMode": "duration-only", "duration": { "default": 0.6 } } ], "targets": [] } }, { "name": "ui-shape-layer", "type": "registry:block", "entry": "src/components/motionactor/ui/shapeLayer/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "orient", "emphasize" ], "useWhen": "The composition needs a plain geometric mark of its own — a rule, an arrow, a panel, or a shape that morphs between two forms.", "avoidWhen": "A family actor already does the job; hand-built shapes standing in for a real actor lose its controls and its reflected metadata.", "pairsWith": [ "ui/text-block", "handdrawn/arrow" ], "energy": "calm" }, "title": "Shape Layer", "description": "Shape Layer.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/shared", "d3-interpolate-path", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "arrow.headSize", "groupName": "arrow", "leafName": "headSize", "kind": "number", "defaultValue": 10, "editable": true, "isReactive": false }, { "path": "arrow.x1", "groupName": "arrow", "leafName": "x1", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "arrow.x2", "groupName": "arrow", "leafName": "x2", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "arrow.y1", "groupName": "arrow", "leafName": "y1", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "arrow.y2", "groupName": "arrow", "leafName": "y2", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "geometry.cornerRadius", "groupName": "geometry", "leafName": "cornerRadius", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "geometry.fromPathData", "groupName": "geometry", "leafName": "fromPathData", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "geometry.morphProgress", "groupName": "geometry", "leafName": "morphProgress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "geometry.pathData", "groupName": "geometry", "leafName": "pathData", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "geometry.shapeType", "groupName": "geometry", "leafName": "shapeType", "kind": "string", "defaultValue": "rect", "editable": true, "isReactive": false }, { "path": "geometry.sides", "groupName": "geometry", "leafName": "sides", "kind": "number", "defaultValue": 6, "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 200, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 200, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.dasharray", "groupName": "palette", "leafName": "dasharray", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "palette.fill", "groupName": "palette", "leafName": "fill", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "palette.glowColor", "groupName": "palette", "leafName": "glowColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.glowIntensity", "groupName": "palette", "leafName": "glowIntensity", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.gradientAngle", "groupName": "palette", "leafName": "gradientAngle", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.gradientFrom", "groupName": "palette", "leafName": "gradientFrom", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.gradientTo", "groupName": "palette", "leafName": "gradientTo", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.gradientType", "groupName": "palette", "leafName": "gradientType", "kind": "string", "defaultValue": "none", "editable": true, "isReactive": false }, { "path": "palette.opacity", "groupName": "palette", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "palette.stroke", "groupName": "palette", "leafName": "stroke", "kind": "string", "defaultValue": "transparent", "editable": true, "isReactive": false }, { "path": "palette.strokeWidth", "groupName": "palette", "leafName": "strokeWidth", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-split-flap-board", "type": "registry:block", "entry": "src/components/motionactor/ui/splitFlapBoard/index.ts", "family": "ui", "kind": "primitive", "tags": [ "mechanical", "status", "text" ], "related": [], "intent": { "jobs": [ "reveal", "bridge" ], "useWhen": "A status changes and the change itself is the story — a destination, a verdict, a figure that has just been updated — and the audience should hear the mechanism turning over before it settles.", "avoidWhen": "The line is prose, or the value updates often; a board this loud makes every routine change feel like an announcement, and a long string walks the drum for an uncomfortably long time.", "pairsWith": [], "energy": "energetic" }, "title": "Split-Flap Board", "description": "Solari departure board whose cells walk the drum forward through every intervening character until they land.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "board.alphabet", "groupName": "board", "leafName": "alphabet", "kind": "string", "defaultValue": " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,'", "editable": true, "isReactive": false }, { "path": "board.cellCount", "groupName": "board", "leafName": "cellCount", "kind": "number", "defaultValue": 12, "editable": true, "isReactive": false }, { "path": "board.gap", "groupName": "board", "leafName": "gap", "kind": "number", "defaultValue": 10, "editable": true, "isReactive": false }, { "path": "board.maxCellWidth", "groupName": "board", "leafName": "maxCellWidth", "kind": "number", "defaultValue": 130, "editable": true, "isReactive": false }, { "path": "cells", "groupName": null, "leafName": "cells", "kind": "array", "editable": false, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "NOW BOARDING", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "geometry", "groupName": null, "leafName": "geometry", "kind": "object", "editable": false, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 260, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1680, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "mechanism.cellStagger", "groupName": "mechanism", "leafName": "cellStagger", "kind": "number", "defaultValue": 0.05, "editable": true, "isReactive": false }, { "path": "mechanism.elapsed", "groupName": "mechanism", "leafName": "elapsed", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "mechanism.flipDuration", "groupName": "mechanism", "leafName": "flipDuration", "kind": "number", "defaultValue": 0.09, "editable": true, "isReactive": false }, { "path": "palette.cellBackground", "groupName": "palette", "leafName": "cellBackground", "kind": "color", "defaultValue": "#0c0c0e", "editable": true, "isReactive": false }, { "path": "palette.glyph", "groupName": "palette", "leafName": "glyph", "kind": "color", "defaultValue": "#f4efe2", "editable": true, "isReactive": false }, { "path": "palette.lowerFace", "groupName": "palette", "leafName": "lowerFace", "kind": "string", "defaultValue": "linear-gradient(180deg, #191a1e 0%, #232429 100%)", "editable": true, "isReactive": false }, { "path": "palette.seam", "groupName": "palette", "leafName": "seam", "kind": "color", "defaultValue": "#050506", "editable": true, "isReactive": false }, { "path": "palette.upperFace", "groupName": "palette", "leafName": "upperFace", "kind": "string", "defaultValue": "linear-gradient(180deg, #26272c 0%, #1a1b1f 100%)", "editable": true, "isReactive": false }, { "path": "settled", "groupName": null, "leafName": "settled", "kind": "boolean", "editable": false, "isReactive": false }, { "path": "settleDuration", "groupName": null, "leafName": "settleDuration", "kind": "number", "editable": false, "isReactive": false }, { "path": "targets", "groupName": null, "leafName": "targets", "kind": "array", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontFamily", "groupName": "typography", "leafName": "fontFamily", "kind": "string", "defaultValue": "ui-monospace, monospace", "editable": true, "isReactive": false } ], "commands": [ { "name": "flipTo", "label": "Flip To", "parameterMode": "params-duration", "params": { "text": { "kind": "string", "label": "Text" } }, "duration": { "default": 1.2 } } ], "targets": [] } }, { "name": "ui-stitched-text-draw", "type": "registry:block", "entry": "src/components/motionactor/ui/stitchedTextDraw/index.ts", "family": "ui", "kind": "primitive", "tags": [ "draw", "handmade", "text" ], "related": [], "intent": { "jobs": [ "reveal", "exhibit" ], "useWhen": "A word should feel made by hand and take real time to appear — a craft brand, a slow reveal over a quiet passage, a title that wants patience rather than impact.", "avoidWhen": "The pace is quick or the register is technical; sewing takes seconds it will not be given, and lands half-drawn when the scene cuts.", "pairsWith": [ "handdrawn/underline" ], "energy": "calm" }, "title": "Stitched Text Draw", "description": "Text sewn as thread stitches, with a leading needle, seeded angle jitter and a thread-tail overshoot.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "STITCH", "editable": true, "isReactive": false }, { "path": "draw.lead", "groupName": "draw", "leafName": "lead", "kind": "number", "defaultValue": 0.05, "editable": true, "isReactive": false }, { "path": "draw.letterPause", "groupName": "draw", "leafName": "letterPause", "kind": "number", "defaultValue": 0.015, "editable": true, "isReactive": false }, { "path": "draw.progress", "groupName": "draw", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 380, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1400, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "needle", "groupName": null, "leafName": "needle", "kind": "json", "editable": false, "isReactive": false }, { "path": "palette.hole", "groupName": "palette", "leafName": "hole", "kind": "color", "defaultValue": "rgba(248, 250, 252, 0.34)", "editable": true, "isReactive": false }, { "path": "palette.needle", "groupName": "palette", "leafName": "needle", "kind": "color", "defaultValue": "#f8fafc", "editable": true, "isReactive": false }, { "path": "palette.thread", "groupName": "palette", "leafName": "thread", "kind": "color", "defaultValue": "#71f5a7", "editable": true, "isReactive": false }, { "path": "poses", "groupName": null, "leafName": "poses", "kind": "array", "editable": false, "isReactive": false }, { "path": "stitch.register", "groupName": "stitch", "leafName": "register", "kind": "string", "defaultValue": "fine", "editable": true, "isReactive": false }, { "path": "stitch.seed", "groupName": "stitch", "leafName": "seed", "kind": "number", "defaultValue": 1461144637, "editable": true, "isReactive": false }, { "path": "strokes", "groupName": null, "leafName": "strokes", "kind": "array", "editable": false, "isReactive": false }, { "path": "tail", "groupName": null, "leafName": "tail", "kind": "json", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "viewBox", "groupName": null, "leafName": "viewBox", "kind": "object", "editable": false, "isReactive": false } ], "commands": [ { "name": "sew", "label": "Sew", "parameterMode": "duration-only", "duration": { "default": 3.2 } }, { "name": "unpick", "label": "Unpick", "parameterMode": "duration-only", "duration": { "default": 1.2 } } ], "targets": [] } }, { "name": "ui-text-block", "type": "registry:block", "entry": "src/components/motionactor/ui/textBlock/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "reveal", "emphasize" ], "useWhen": "The words on screen are the content — a quote, a claim, a definition — revealed and then emphasised phrase by phrase as it is read.", "avoidWhen": "The line is a title that should land as one gesture; a per-phrase reveal turns a headline into a crawl, which is ui/text-word-reveal's job to avoid.", "pairsWith": [ "handdrawn/underline", "fx-emphasis/article-highlight" ], "energy": "calm" }, "title": "Text Block", "description": "Text Block.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "highlights.progress", "groupName": "highlights", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "highlights.spans", "groupName": "highlights", "leafName": "spans", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 200, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 800, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.base", "groupName": "palette", "leafName": "base", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "palette.finish", "groupName": "palette", "leafName": "finish", "kind": "string", "defaultValue": "solid", "editable": true, "isReactive": false }, { "path": "palette.glowColor", "groupName": "palette", "leafName": "glowColor", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.gradientAngle", "groupName": "palette", "leafName": "gradientAngle", "kind": "number", "defaultValue": 110, "editable": true, "isReactive": false }, { "path": "palette.gradientFrom", "groupName": "palette", "leafName": "gradientFrom", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "palette.gradientTo", "groupName": "palette", "leafName": "gradientTo", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "reveal.blur", "groupName": "reveal", "leafName": "blur", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.mode", "groupName": "reveal", "leafName": "mode", "kind": "string", "defaultValue": "instant", "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "reveal.treatment", "groupName": "reveal", "leafName": "treatment", "kind": "object", "defaultValue": { "type": "plain" }, "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontFamily", "groupName": "typography", "leafName": "fontFamily", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "typography.fontSize", "groupName": "typography", "leafName": "fontSize", "kind": "number", "defaultValue": 48, "editable": true, "isReactive": false }, { "path": "typography.fontWeight", "groupName": "typography", "leafName": "fontWeight", "kind": "string", "defaultValue": "bold", "editable": true, "isReactive": false }, { "path": "typography.letterSpacing", "groupName": "typography", "leafName": "letterSpacing", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "typography.lineHeight", "groupName": "typography", "leafName": "lineHeight", "kind": "number", "defaultValue": 1.3, "editable": true, "isReactive": false }, { "path": "typography.textAlign", "groupName": "typography", "leafName": "textAlign", "kind": "string", "defaultValue": "left", "editable": true, "isReactive": false } ], "commands": [ { "name": "highlight", "label": "Highlight", "parameterMode": "params-duration", "params": { "spans": { "kind": "json", "label": "Spans" } }, "duration": { "default": 0.4 } }, { "name": "revealText", "label": "Reveal Text", "parameterMode": "duration-only", "duration": { "default": 0.8 } }, { "name": "setText", "label": "Set Text", "parameterMode": "params-duration", "params": { "text": { "kind": "string", "label": "Text" } }, "duration": { "default": 0 } } ], "targets": [] } }, { "name": "ui-text-reveal-card", "type": "registry:block", "entry": "src/components/motionactor/ui/textRevealCard/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "reveal" ], "useWhen": "A line should be uncovered rather than typed on — a sweep across a card that hands over the words as it passes.", "avoidWhen": "The card holds more than a line or two; a sweep across a paragraph gives away the end before anyone has read the start.", "pairsWith": [ "ui/text-block", "fx-treatments/gloss" ], "energy": "measured" }, "title": "Text Reveal Card", "description": "Text Reveal Card.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "card.borderRadius", "groupName": "card", "leafName": "borderRadius", "kind": "number", "defaultValue": 18, "editable": true, "isReactive": false }, { "path": "card.padding", "groupName": "card", "leafName": "padding", "kind": "number", "defaultValue": 32, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.revealText", "groupName": "content", "leafName": "revealText", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 220, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 900, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.background", "groupName": "palette", "leafName": "background", "kind": "color", "defaultValue": "#1d1c20", "editable": true, "isReactive": false }, { "path": "palette.base", "groupName": "palette", "leafName": "base", "kind": "color", "defaultValue": "#323238", "editable": true, "isReactive": false }, { "path": "palette.border", "groupName": "palette", "leafName": "border", "kind": "color", "defaultValue": "rgba(255,255,255,0.12)", "editable": true, "isReactive": false }, { "path": "palette.divider", "groupName": "palette", "leafName": "divider", "kind": "color", "defaultValue": "rgba(115,115,115,0.9)", "editable": true, "isReactive": false }, { "path": "palette.revealFrom", "groupName": "palette", "leafName": "revealFrom", "kind": "color", "defaultValue": "#ffffff", "editable": true, "isReactive": false }, { "path": "palette.revealTo", "groupName": "palette", "leafName": "revealTo", "kind": "color", "defaultValue": "#d4d4d8", "editable": true, "isReactive": false }, { "path": "reveal.blur", "groupName": "reveal", "leafName": "blur", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.style", "groupName": "reveal", "leafName": "style", "kind": "string", "defaultValue": "sweep", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontFamily", "groupName": "typography", "leafName": "fontFamily", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "typography.fontSize", "groupName": "typography", "leafName": "fontSize", "kind": "number", "defaultValue": 56, "editable": true, "isReactive": false }, { "path": "typography.fontWeight", "groupName": "typography", "leafName": "fontWeight", "kind": "string", "defaultValue": "black", "editable": true, "isReactive": false }, { "path": "typography.letterSpacing", "groupName": "typography", "leafName": "letterSpacing", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "typography.lineHeight", "groupName": "typography", "leafName": "lineHeight", "kind": "number", "defaultValue": 1.05, "editable": true, "isReactive": false }, { "path": "typography.textAlign", "groupName": "typography", "leafName": "textAlign", "kind": "string", "defaultValue": "left", "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-text-word-reveal", "type": "registry:block", "entry": "src/components/motionactor/ui/textWordReveal/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "reveal" ], "useWhen": "A headline or key line should land word by word, in step with the beats of the narration underneath it.", "avoidWhen": "The text has to change or swap mid-scene; this reveals one static line and nothing after it, where ui/text-block keeps working.", "pairsWith": [ "handdrawn/title", "ui/text-block" ], "energy": "measured" }, "title": "Text Word Reveal", "description": "Text Word Reveal.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 220, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1000, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.base", "groupName": "palette", "leafName": "base", "kind": "color", "defaultValue": "#f8fafc", "editable": true, "isReactive": false }, { "path": "palette.ghost", "groupName": "palette", "leafName": "ghost", "kind": "color", "defaultValue": "rgba(248,250,252,0.22)", "editable": true, "isReactive": false }, { "path": "reveal.blur", "groupName": "reveal", "leafName": "blur", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "reveal.motion", "groupName": "reveal", "leafName": "motion", "kind": "string", "defaultValue": "rise", "editable": true, "isReactive": false }, { "path": "reveal.progress", "groupName": "reveal", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "spacing.gapX", "groupName": "spacing", "leafName": "gapX", "kind": "number", "defaultValue": 14, "editable": true, "isReactive": false }, { "path": "spacing.gapY", "groupName": "spacing", "leafName": "gapY", "kind": "number", "defaultValue": 4, "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontFamily", "groupName": "typography", "leafName": "fontFamily", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "typography.fontSize", "groupName": "typography", "leafName": "fontSize", "kind": "number", "defaultValue": 76, "editable": true, "isReactive": false }, { "path": "typography.fontWeight", "groupName": "typography", "leafName": "fontWeight", "kind": "string", "defaultValue": "black", "editable": true, "isReactive": false }, { "path": "typography.letterSpacing", "groupName": "typography", "leafName": "letterSpacing", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "typography.lineHeight", "groupName": "typography", "leafName": "lineHeight", "kind": "number", "defaultValue": 1.06, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-toast", "type": "registry:block", "entry": "src/components/motionactor/ui/toast/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "demonstrate" ], "useWhen": "The system answers back — saved, deployed, failed — and the confirmation arriving is what proves the action went through.", "avoidWhen": "Nothing was done to warrant it; a toast with no preceding action reads as a notification the film invented for itself.", "pairsWith": [ "ui/badge", "media/audio-manager" ], "energy": "measured" }, "title": "Toast", "description": "Toast.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "card.borderRadius", "groupName": "card", "leafName": "borderRadius", "kind": "number", "defaultValue": 12, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.message", "groupName": "content", "leafName": "message", "kind": "string", "defaultValue": "", "editable": true, "isReactive": false }, { "path": "content.variant", "groupName": "content", "leafName": "variant", "kind": "string", "defaultValue": "info", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 56, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 340, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "renderStyle", "groupName": null, "leafName": "renderStyle", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-toast-stack", "type": "registry:block", "entry": "src/components/motionactor/ui/toastStack/index.ts", "family": "ui", "kind": "primitive", "tags": [], "related": [], "intent": { "jobs": [ "agitate", "demonstrate" ], "useWhen": "Volume is the point — alerts piling up faster than anyone could read them, the noise the product is about to take away.", "avoidWhen": "One message matters; a stack buries it, and ui/toast lands a single confirmation cleanly.", "pairsWith": [ "ui/toast", "fx-emphasis/shake" ], "energy": "frantic" }, "title": "Toast Stack", "description": "Toast Stack.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "@motionactor/theme", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.maxToasts", "groupName": "content", "leafName": "maxToasts", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "content.toasts", "groupName": "content", "leafName": "toasts", "kind": "array", "defaultValue": [], "editable": false, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 220, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 360, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "renderStyle", "groupName": null, "leafName": "renderStyle", "kind": "string", "defaultValue": "glass", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false } ], "commands": [], "targets": [] } }, { "name": "ui-variable-font-flex", "type": "registry:block", "entry": "src/components/motionactor/ui/variableFontFlex/index.ts", "family": "ui", "kind": "primitive", "tags": [ "emphasize", "text", "variable-font" ], "related": [], "intent": { "jobs": [ "emphasize", "reveal" ], "useWhen": "A single word carries the whole beat and should gather weight as it lands, the way a voice leans into it, with the layout around it staying exactly where it was.", "avoidWhen": "The text runs longer than a word or two, or the composition cannot load a variable face — under a static font every character renders at one weight and the motion silently disappears.", "pairsWith": [], "energy": "measured" }, "title": "Variable Font Flex", "description": "A word carving from thin and narrow to bold and wide, with the font-size giving mass back so the box holds.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "FLEX", "editable": true, "isReactive": false }, { "path": "flex.axis", "groupName": "flex", "leafName": "axis", "kind": "string", "defaultValue": "both", "editable": true, "isReactive": false }, { "path": "flex.progress", "groupName": "flex", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "flex.staggerRatio", "groupName": "flex", "leafName": "staggerRatio", "kind": "number", "defaultValue": 0.45, "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "glyphs", "groupName": null, "leafName": "glyphs", "kind": "array", "editable": false, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 340, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1200, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.text", "groupName": "palette", "leafName": "text", "kind": "color", "defaultValue": "#f8fafc", "editable": true, "isReactive": false }, { "path": "sizeScale", "groupName": null, "leafName": "sizeScale", "kind": "number", "editable": false, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontFamily", "groupName": "typography", "leafName": "fontFamily", "kind": "string", "defaultValue": "\"Roboto Flex\", system-ui, sans-serif", "editable": true, "isReactive": false }, { "path": "typography.fontSize", "groupName": "typography", "leafName": "fontSize", "kind": "number", "defaultValue": 220, "editable": true, "isReactive": false } ], "commands": [ { "name": "flexIn", "label": "Flex In", "parameterMode": "duration-only", "duration": { "default": 1.6 } }, { "name": "flexOut", "label": "Flex Out", "parameterMode": "duration-only", "duration": { "default": 0.8 } } ], "targets": [] } }, { "name": "ui-weight-wave", "type": "registry:block", "entry": "src/components/motionactor/ui/weightWave/index.ts", "family": "ui", "kind": "primitive", "tags": [ "ambient", "text", "variable-font" ], "related": [], "intent": { "jobs": [ "emphasize", "exhibit" ], "useWhen": "A held headline needs to stay alive without moving — a crest of thickness travelling along it reads as pressure passing through the words while the line itself stays put.", "avoidWhen": "Something else in the frame is already moving, or the composition cannot load a variable face; the crest either competes for attention or fails to render at all.", "pairsWith": [], "energy": "calm" }, "title": "Weight Wave", "description": "A crest of thickness travelling along a headline on the variable-font weight and slant axes.", "dependencies": [ "@motionactor/core", "@motionactor/primitives", "@motionactor/renderers", "react" ], "registryDependencies": [], "exports": [ "@motionactor/ui" ], "controls": { "fields": [ { "path": "appearance.opacity", "groupName": "appearance", "leafName": "opacity", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "axes.slant", "groupName": "axes", "leafName": "slant", "kind": "number", "defaultValue": -12, "editable": true, "isReactive": false }, { "path": "axes.weightFrom", "groupName": "axes", "leafName": "weightFrom", "kind": "number", "defaultValue": 400, "editable": true, "isReactive": false }, { "path": "axes.weightTo", "groupName": "axes", "leafName": "weightTo", "kind": "number", "defaultValue": 1000, "editable": true, "isReactive": false }, { "path": "compositing.blend", "groupName": "compositing", "leafName": "blend", "kind": "string", "defaultValue": "source-over", "editable": true, "isReactive": false }, { "path": "compositing.clip", "groupName": "compositing", "leafName": "clip", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "compositing.isolate", "groupName": "compositing", "leafName": "isolate", "kind": "boolean", "defaultValue": false, "editable": true, "isReactive": false }, { "path": "content.text", "groupName": "content", "leafName": "text", "kind": "string", "defaultValue": "PRESSURE MOVES THROUGH TYPE", "editable": true, "isReactive": false }, { "path": "flexItem.alignSelf", "groupName": "flexItem", "leafName": "alignSelf", "kind": "string", "defaultValue": "auto", "editable": true, "isReactive": false }, { "path": "glyphs", "groupName": null, "leafName": "glyphs", "kind": "array", "editable": false, "isReactive": false }, { "path": "gridItem.gridColumn", "groupName": "gridItem", "leafName": "gridColumn", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "gridItem.gridRow", "groupName": "gridItem", "leafName": "gridRow", "kind": "json", "defaultValue": null, "editable": false, "isReactive": false }, { "path": "layout.height", "groupName": "layout", "leafName": "height", "kind": "number", "defaultValue": 240, "editable": true, "isReactive": false }, { "path": "layout.width", "groupName": "layout", "leafName": "width", "kind": "number", "defaultValue": 1760, "editable": true, "isReactive": false }, { "path": "layout.x", "groupName": "layout", "leafName": "x", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "layout.y", "groupName": "layout", "leafName": "y", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "palette.text", "groupName": "palette", "leafName": "text", "kind": "color", "defaultValue": "#f8fafc", "editable": true, "isReactive": false }, { "path": "transform.rotation", "groupName": "transform", "leafName": "rotation", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "transform.scale", "groupName": "transform", "leafName": "scale", "kind": "number", "defaultValue": 1, "editable": true, "isReactive": false }, { "path": "typography.fontFamily", "groupName": "typography", "leafName": "fontFamily", "kind": "string", "defaultValue": "\"Recursive\", sans-serif", "editable": true, "isReactive": false }, { "path": "typography.fontSize", "groupName": "typography", "leafName": "fontSize", "kind": "number", "defaultValue": 120, "editable": true, "isReactive": false }, { "path": "typography.letterSpacing", "groupName": "typography", "leafName": "letterSpacing", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false }, { "path": "wave.crestWidth", "groupName": "wave", "leafName": "crestWidth", "kind": "number", "defaultValue": 4, "editable": true, "isReactive": false }, { "path": "wave.direction", "groupName": "wave", "leafName": "direction", "kind": "string", "defaultValue": "ltr", "editable": true, "isReactive": false }, { "path": "wave.passes", "groupName": "wave", "leafName": "passes", "kind": "number", "defaultValue": 3, "editable": true, "isReactive": false }, { "path": "wave.progress", "groupName": "wave", "leafName": "progress", "kind": "number", "defaultValue": 0, "editable": true, "isReactive": false } ], "commands": [ { "name": "sweep", "label": "Sweep", "parameterMode": "duration-only", "duration": { "default": 3 } } ], "targets": [] } } ] }