02. Transformation

Background

Digital interfaces are not static, they respond, shift, and evolve based on user input. Buttons morph, characters react, systems transition between states. These transformations are often invisible or purely functional, but they can also be expressive, narrative, and emotional.
This project explores transformation as a core mechanic of interaction.
You will create an interactive experience in Rive where something changes from one state to another over time. This transformation must be:

Triggered by user interaction
Communicated through animation
Embedded within some kind of narrative

Some examples

The transformation could be:

literal (a monster being attacked or weakened)
emotional (a face shifting mood(s))
systemic (an interface becoming unstable or reorganizing adapting to user input).
abstract (a series of geometric shapes that change state that imply a mood or story)

Like the “Remapping” project , this is both a technical exercise and a means of expression.

Objectives

Gain familiarity with Rive state machines, inputs, transformations and potentially other features like bones
Understand how interaction drives animation and meaning
Explore transformation as a narrative device
Develop a project from concept → system → interactive experience
Balance technical constraints with expressive goals

Requirements

Any imagery (raster, vector or otherwise) should be your own (for this, no copyrighted characters or images).
A clearly defined transformation (state A → state B, or multiple stages or sub-stages)
Transformation must be triggered by user input (click, hover, drag, etc.)
Transformation must be visually animated (not instantaneous)
Use of Rive state machines (booleans, triggers, numbers, etc.)

Final Deliverables

A folder containing:

A link to your final Rive file (or embedded website/experience)
Exported assets or embed (if applicable)

A subfolder with:

Sketches / notes / ideation
State diagrams (how transformation works)
Wireframes or interaction plans

Considerations

Narrative does not need to be literal
A system “breaking” or “healing” can still be a story
Interaction is the driver
If nothing happens without the user, you’re on the right track
Transformation should be legible
The user should feel the change, even if they don’t fully understand it
You are not building a full app you are building an experience
Focus on making the transformation compelling or interesting, not exhaustive or perfect

No Shuriken Mode Challenges

(This is where "no shuriken mode" comes from)

(These do not guarantee a better grade, they are merely suggestions for what might be a superlative project, or a jumping off point if you're not sure what to do technologically)

Create a fully realized character walking (use bones)
Create a more refined idle state (i.e. A Street Fighter type character slowly getting beat up, or different parts of their face accepting damage)
Chain multiple transformations together, or layer multiple types of interactions.
Use multiple types of input behavior (hover + click + drag)
Create branching outcomes (different endings)
Build a “loop” where the system resets or mutates further
Integrate into a webpage or larger interface
Work with other folks in the class to create a character select screen with multiple characters, and the transformations could be, them in different stages of their life, or at different experience levels.

Grading

Criterion	%
All files present and organized	5%
Use of Rive state machine logic	10%
Interaction clearly drives transformation	10%
Clarity of transformation (visual + conceptual)	15%
Narrative integration	15%
Craft of animation and timing	15%
Process work (notes, diagrams, iteration)	10%
Technical execution	10%
Overall strength of concept	10%

Timeline (4 Weeks)

Week 1 (04/02/2026) → Introduction & Ideation

In class → Introduction to project. Begin ideation on paper, present your idea to the class.
For Homework → Continue your idea, map out your state machine (how it will transition), and begin to construct it in Rive (without final art, have the file in the workspace for class).

Week 2 (04/09/2026) → Rough prototype

In class → Everyone presents their in-progress Rive file.
For Homework → Continue progress on your Rive file based on feedback and technical understanding.

Week 3 (04/16/2026) → Refined Prototype

In class → In groups, discuss the state of your progress. Each group provides a "report" to the class for a larger discussion.
For Homework → Prepare proposed final based on feedback