Project case study
Beyond Agreement
For my AI 201 class, our team explored what happens when AI agrees with something it should question. Beyond Agreement turns our proposal into an interactive walkthrough, from the first response to correction and review.
My role: Project direction, writing integration and visual experience for our course team, with AI-assisted development.
Watch the interactive walkthroughHow it works
Question the agreement.
Scripted conversation: a request for evidence gets praise instead.
How it works: A selected choice loads a written response. GSAP reveals the text in the chat; no model API is called.
Turn the reply into something tangible.
Reply to paper: the same answer crumples into a ball for independent review.
How it works: The reply text is drawn on a Canvas triangle mesh. GSAP folds it; drag hit-testing or the catch button triggers the glove handoff.
Hold the release.
Testing and review: failed checks keep the proposed release gate closed.
How it works: A step index controls the scene. GSAP moves the model between provider and reviewer while updating scripted check results and release status.
Show the correction.
Correction and retest: replace unsupported praise with a response that asks for evidence.
How it works: The timeline pauses on the before-and-after response. Continue resumes the independent retest animation, then updates the illustrated checks.
Follow the report.
Incident reporting: a later response becomes a report that reviewers investigate.
How it works: A checkbox changes the local redaction display. One persistent report element moves through GSAP handoffs. Nothing is submitted or stored.
Keep accountability proportionate.
Proposed safeguards: serious risk can lead to suspension, with evidence requirements and a right to appeal.
How it works: The severity control switches the displayed policy route. Timeline steps show enforcement and appeal safeguards as an illustrative process.
Close the incident, keep learning.
Verified return: correction, retesting, and review lead back to release and updated standards.
How it works: The same model and report elements keep their state across steps. GSAP animates their positions, SVG routes, and verification indicators.
Come back to the original question.
A grounded answer: test demand, competition, and costs before committing savings.
How it works: The ending uses the visitor’s opening choice to select a written comparison response. GSAP types it and draws the closing emphasis.
Make the proposal something you can follow.
For my AI 201 class, my team and I worked on harmful AI sycophancy: when an AI reinforces a person’s belief even when it should push back. I helped shape the proposal and built the visual experience around a concrete question: who does what when that happens?
- My part
- Direction, writing integration, and visual experience within a team project. Implementation was AI-assisted.
- Built with
- JavaScript, GSAP timelines, HTML, SVG, and a custom Canvas 2D paper animation.
- Project type
- AI 201 coursework. The governance process is a proposal, and the conversations are scripted examples.
Technical overview
The opening conversation is scripted. A selected reply is drawn onto a canvas texture, divided into triangles, and animated into a crumpled sheet. That same reply becomes the paper ball the visitor can drag or catch with a button.
The governance journey uses GSAP timelines to move persistent model and incident elements between providers, independent reviewers, users, and the proposed enforcement role. Step state controls the text, release status, and available actions.
The written proposal and citations are stored in a separate JavaScript module and opened in a dialog. This experience does not call a model API, collect a real report, or send visitor choices to an enforcement service.
A decision and what changed
The earlier version separated the journey into panels. The redesign carries the response into a report and follows the incident through the process, so the visitor can see what each handoff means.
One iteration revealed the same report twice because two animations controlled its appearance. The handoff was changed so one transition owned that reveal. The correction sequence also gained an explicit Continue action before retesting, giving people time to read what actually changed.
What this demonstrates
The experience makes the proposal concrete: a failed check can hold a release, a provider makes a correction, an independent reviewer retests it, and a later incident can inform another test.
That is a demonstration of the proposed process, not evidence that the policy reduces harm in practice. The next research questions are how harmful sycophancy should be measured, who sets the standards, and how to avoid restricting ordinary helpful responses.
Iteration and checks
The saved build history documents repeated revisions in October 2026, including the chat-to-paper transition, clearer correction steps, and mobile layout fixes. It does not establish a reliable total of my hours.
The project’s recorded checks cover drag and button alternatives, back and replay, reduced motion, source access, and phone-sized layouts. Those are browser checks, not physical-phone testing or a measured usability study.