# Task: Step Guided Scene Flow (Camera + Object State Changes)

## Objective
Create a 3-step guided flow where each step changes camera position/look target and object states (visibility, position, rotation).

## Vanilla three.js
- Possible: Yes
- Notes:
  - Defines a step configuration array with camera and object state for each step.
  - Buttons and keyboard shortcuts switch between steps.
  - Animates transitions with interpolation for camera position, look target, object transforms, and visibility changes.
-Key concepts:
  - Step/state data model
  - Camera target and lookAt transitions
  - Object visibility toggling
  - Smooth lerp-based animation
-Complexity: Medium

## R3F
-Possible: Yes
-Notes:
  - Uses React state for active step and a shared STEPS config.
  - Uses refs for objects and useFrame for smooth interpolation each frame.
  - UI stays declarative while scene updates are handled in a guided controller pattern.
-What R3F abstracted:
  - Render loop integration through hooks
  - Scene update flow tied to React state
  - Cleaner composition for scene and controls
-Complexity: Medium

## Thob Page Builder
-Possible: Partial
-Notes:
  - We can create the same result by toggling multiple combinations of the Make Default button of the Perspective Camera component and by toggling the visibilty object component.
  - Same as before, the button UX needs improvement.
  - The button should connect to and change component prop values in an easier and more intuitive way.
  - I was not able to clearly figure out how to make the button functional end-to-end.

- Builder steps:
  - Add Perspective Camera component and toggle Make Default.
  - Add object components and configure visibility states.
  - Add step buttons and try to bind button actions to camera and object prop changes.
- Complexity: Hard

## Comparison Summary
- Possible in all 3? Partial
- Main differences:
  - Vanilla and R3F both support full step transitions with explicit logic.
  - Thob can represent the setup, but interaction wiring for step-driven prop updates is still difficult.
- Where Thob is better:
  - Fast visual setup of scene components without writing all code.
- Where Thob is weaker:
  - Button-to-prop binding discoverability and ease of use.
- What feels awkward or unclear:
  - How to make one button reliably update multiple target props (camera + object states) per step.

## Limitation Type (if any)
- [x] Editor UX limitation
- [ ] Runtime limitation
- [ ] Schema / data model limitation
- [ ] Component limitation
- [x] Event system limitation
- [ ] Asset pipeline limitation
- [ ] Unknown / needs investigation

## Workaround
- Is there a workaround?
  - Partial workaround.
- If yes, what is it?
  - Use Make Default and object toggles for basic/static setups.
  - For complete multi-step transitions, implement custom interaction logic outside the current builder button flow.

## Suggested Improvement
-What should improve in Thob?
  - Improve Make Default button UX.
  - Make button binding to component props simpler and more intuitive.
  - Provide a clear mapping UI for action -> target component -> prop -> value.
- Is it:
  - editor
  - UX
  - component

## Difficulty Estimate
- Medium

## Business Value
- High

## Recommendation
Yes, Thob should support this better because guided camera/object step flows are common in demos, onboarding scenes, and product explainers. Better interaction UX would make this practical for non-technical users.