Paraplex

Paraplex recipes

paraplex-recipes · by Paraplex

The app's own sequences as tool calls: kinetic title, card carousel, chart reveal, UI tour, product hero, glass nav — each a skeleton with the curves and timings from the other skills. Load when building one of these from a description.

Paraplex recipes

Eight pieces people ask for by name, each as the tools that build it. Timings follow motion-fundamentals; type follows typography-in-motion; the camera follows camera-language. Substitute the person's copy, colors and sizes; keep the shape.

Sizes are in scene units where the frame is about 3.2 units wide at 16:9 (the snapshot gives the visible width); z toward the camera is positive.

1. Kinetic title (8 s)

  1. set_duration 8; set_markers at 0.3 ("title"), 3.2 ("line"), 6.5 ("out").
  2. add_text "Headline", fontSize 0.55, position y 0.15; apply_text_style a style if the brand has a look (or leave flat white).
  3. set_text_animation ref "Headline", preset "stomp", split "word", stagger 0.12, startSeconds 0.3, exitPreset "fade", exitStart 6.5, exitDuration 0.3.
  4. add_text "Support line", fontSize 0.2, position y −0.3; set_text_animation preset "blur", split "word", stagger 0.06, startSeconds 3.2, exitPreset "blur", exitStart 6.6.
  5. add_camera_move move "push-in", layer "Headline", durationSeconds 6, amount 0.25, startSeconds 0.3 (a slow drift under the words).
  6. set_scene_look grain 6.

2. Card carousel (10 s, three cards)

  1. add_panel ×3 ("Card 1–3"), width 1.1, height 1.5, cornerRadius 0.08; set_appearance "frosted" or the brand's material; assign_media if there are pictures.
  2. add_group "Carousel" with the three, set_rig arrangement "arc", spacing 1.3, arcRadius 2.2, so they fan.
  3. animate_frames: at 0 s each card opacity 0, position y −0.4; at 0.6 s at rest, easing "ease-out", staggerSeconds 0.06 on both frames.
  4. Rotate the group to bring each card to the front on its beat: add_keyframe "Carousel" rotation.y 0 at 1 s, −40 at 4 s (easing "ease"), −80 at 7 s (easing "ease").
  5. animate_layer direction "out", preset "fade" on the group at 9.4 s.

3. Chart reveal (8 s)

  1. add_chart with the data (bars or a line), position centered, width 2.4.
  2. The chart's layers arrive staggered: animate_frames at 0.4 s scale 0 (bars from their base, so set the group's rig anchor at the bottom) and at 1.2 s scale 1, easing "spring-gentle", staggerSeconds 0.05.
  3. add_text the headline number above, set_counter from 0 to the value over 1.2 s starting at 0.6 s; set_text_animation preset "fade" on the label.
  4. Hold to 6.5 s; animate_layer direction "out" preset "slide-left" on the group, 0.4 s.

4. UI tour (15 s)

  1. add_ui_overlay browser or phone around the screenshot panel (assign_media the screenshot first).
  2. add_cursor style "macos" (or "hand" for a drag), stops at the features in order with click "click" and holdSeconds 1.2 each; a press with dragLayer where something is dragged.
  3. For each stop, a caption: add_text near the feature, set_text_animation preset "blur-line", startSeconds at that stop's arrival, exitPreset "blur", exitStart 0.3 s before the next stop.
  4. add_camera_move move "push-in" toward each feature as the cursor arrives (amount 0.15, durationSeconds 0.8), then "pull-back" at the end.
  5. set_frame_pin on a persistent label (the product name) so it stays in the corner through the moves.

5. Product hero (12 s)

  1. The product as a panel with its picture, or a 3D model (generate_model or an imported glb); set_appearance "chrome" or "crystal" for a jewel, "porcelain" for a device.
  2. set_scene_look environment "studio-contrast"; add_light spot key upper-left, add_light spot rim behind with sourceWidth 0.2.
  3. Depth: a backdrop panel at z −1.2 with a set_gradient; a foreground detail at z +0.4.
  4. add_camera_move move "orbit", layer "Product", durationSeconds 5, amount 0.5 from 1 s; then "push-in" durationSeconds 2 from 7 s.
  5. Name and line: add_text ×2, set_text_animation "tracking-in" split "char" on the name at 8 s, "soft-rise" on the line at 9 s.
  6. add_transition edge "out" kind "fade" 0.5 s.

6. Glass nav (6 s loop)

  1. add_panel "Bar", width 2.6, height 0.32, cornerRadius 0.16; set_material "glass" or set_appearance "liquid-glass" so it lenses the backdrop.
  2. Four add_text labels inside, fontSize 0.12, flat; add_group "Nav" and set_layout flex row with even spacing.
  3. A busy backdrop behind (a gradient panel or a picture) at z −0.3 so the glass has something to bend; animate_frames drifting it slowly (position x −0.2 at 0 s, +0.2 at 6 s, linear) — the loop's motion.
  4. A "pill" panel behind the active label: add_panel width 0.5, height 0.24, cornerRadius 0.12, fill the accent at 30% opacity; add_keyframe its position.x at each label's x every 1.5 s with easing "spring".
  5. Loop: last frames equal the first; set_duration 6.

7. The morph chain (6 s): dot → pill → toggle → toast → bar → line

  1. Six rounded rectangles, one per state, all at the same place, each fill the accent, cornerRadius a share of the shorter side (0.5 is fully round): "Dot" 0.16 × 0.16 radius 0.5; "Pill" 0.7 × 0.16 radius 0.5; "Track" 0.5 × 0.26 radius 0.5; "Toast" 1.6 × 0.42 radius 0.25, a darker fill; "Bar" 2.4 × 0.08 radius 0.5; "Line" 2.4 × 0.01. set_clip each later state far out (inSeconds 20) — each morph moves it to its cue.
  2. Content as its own layers, not inside the shapes, at full opacity — the morph's fades hide them until their cue: a "Knob" circle in the track, the toast's "Message" text.
  3. One morph_to per link, each starting where the last ended, 0.35–0.5 s, easing "expo-out" for the snappy links and "ease-in-out" for the big ones: Dot → Pill at 0.4; Pill → Track at 1.2 with fade_in ["Knob"]; Track → Toast at 2.2 with fade_out ["Knob"], fade_in ["Message"]; Toast → Bar at 3.6 with fade_out ["Message"]; Bar → Line at 4.4.
  4. A hold of 0.4–0.8 s between links so each state reads; the knob slides across its track (add_keyframe position.x) during its hold.

8. Reveals and routes

  • Iris wipe: add_iris on the incoming scene (a group with its own full-frame background), origin the dot or button it opens from, 0.25 s — it grows on expo-in; edge "out" closes one into a point. lens true is the lens reveal: the new scene opens inside a Liquid Glass lens whose bend relaxes as it fills the frame.
  • Push and zoom through: set_clip_transition kind "push-up" on the outgoing scene's out edge (0.3 s) pushes it off to uncover the next under it; kind "zoom-through" on the outgoing's out edge and the incoming's in edge (0.4 s each, at the same cut) flies into one and settles out of depth into the other.
  • Text inside a growing pill: the pill's width keyed wider, the text set_mask by the pill with show_mask true, so the words are cut by the pill's edge as it grows.
  • A word changing in place: set_text_swap preset "roll" with the words, 0.6 s apart.
  • A card that turns over: build the front and the back as two layers (or groups) the same size, then make_flip_card — 0.6 s on "ease-in-out", or a spring for a flip that lands.
  • A route drawn and followed: key a layer's position at its stops, then make_motion_path — it rides a curve through them with the same timing; set_follow_path orient true to bank along it, draw_path true to show the route (a dashed line on a map).

9. UI states: a button that presses, a toggle that flips

  1. Start from the kit: add_kit_component "button", "toggle", "checkbox", "text-field", "toast"… brings a master with its states ready (and set_scene_look toneMapping "none" so its colors are exact); add_instance places the copies you animate. Or build your own master as a group — a "Background" panel (set_corners radius 0.5 for a pill, smoothing 0.6), a "Label" text, any "Icon" or "Spinner" child the states need — and create_component it.
  2. set_component_state on the master for each state: "Hover" { "Background.fillColor": a step lighter }, "Pressed" { "Background.fillColor": a step darker, "Background.scale": 0.97 }, "Disabled" { "Background.opacity": 40, "Label.opacity": 60 }, "Loading" { "Label.visible": false, "Spinner.visible": true }. A toggle: "On" moves its "Knob" (Knob.position.x to the other end) and fills its "Track".
  3. set_state on the instance with at for each change: hover at the cursor's arrival, pressed 0.3 s later, default 0.15 s after that — 0.15–0.25 s each on "expo-out"; a toggle's knob on "spring". Every difference animates; words change on the text lane; a hidden child fades.
  4. The cursor: perform the steps in order ({ tap }, { toggle }, { type, text }, { drag }, { scroll }, { wait }, { show }, { screen }) — the UI answers at each click.
  5. Screens: groups under one parent, carried layers named alike; smart_animate dissolve, push, pop or sheet, 0.35–0.5 s.

Where the numbers come from

Arrivals 0.4–0.7 s on an out curve; staggers 40–80 ms by word, 50–60 ms by card; holds 1.5 s plus; exits at 0.7× and 0.2 s before the next arrival; one camera idea per shot; one accent. If a request conflicts with these, the request wins — say what you changed.