Application Guide

Raynah Motion: Where your animation, sound, and project live

A teacher's practical guide to how the stop-motion studio handles webcam captures, audio, browser persistence, and exporting work.

✓ Saved in this browser on this device Launch Raynah Motion ↗

At a Glance

Storage Location Browser Database (IndexedDB)

Returns Tomorrow? Yes, on the same computer & profile

Portable Backup Download .raynah.zip

Sharing / Watching Export .mp4 or .webm

Internet Required? Only to load the page (runs locally)

Permissions Camera & Microphone (on demand)

What You Can Do

Students can use Raynah Motion to storyboard stories, build claymations, record voiceovers, and edit scene timings directly in their browser. Because stop-motion animations involve hundreds of high-resolution image frames, Raynah is engineered to store and render everything locally on your computer.

This application does not upload student photos, video frames, or audio recordings to mrsutherland.net servers. All editing, scrubbing, and rendering take place inside your device's web browser.

Where Your Work Lives (System Map)

This diagram shows how camera frames enter Raynah, how work is continuously saved in the browser database, and how to choose the right file for your goal:

Raynah Motion Data & Storage Architecture

Open Full View ↗

Reading the diagram: Notice that webcam captures and audio clips stay inside your computer boundary. They are written into your browser's IndexedDB storage. From there, you branch into either an editable project file or a rendered movie.

Your Files Table

It is easy for students to confuse a finished movie with an editable project. Use this table to choose the correct file:

File Type	What it Contains	Editable in Raynah?	Best For
`.raynah.zip`	Full timeline data, raw image frames, and recorded audio clips	Yes (Use Project → Import Project)	Backing up work, moving to another computer, or resuming editing next week
`.mp4` or `.webm`	Rendered video movie	No (Finished viewing copy)	Submitting to the teacher, sharing with parents, or watching in class
`.png` / `.jpg`	Single still photo files	Can be inserted as new frames	Importing background scenery or titles created in other apps

Step by Step: Classroom Workflow

1. During the Lesson

As students take photos with their webcam or arrange clips on the timeline, Raynah writes changes to the browser's IndexedDB database automatically. If a student accidentally closes the tab or refreshes the window, reopening Raynah on the same machine restores the animation.

2. Packing Up (End of Lesson)

To ensure student work survives school device reboots or computer sharing:

Click the Project menu in the upper navigation bar.
Select Export Project (.raynah.zip).
Check the browser's Downloads folder for the downloaded zip file.
Move this file into the student's personal network folder, Google Drive, or a USB flash drive.

💡 Tip for Shared School Computers

If another student will use the same laptop in the next period, have the first student export their .raynah.zip file, then click Project → New Project to clear the timeline for the next class.

If Something Goes Wrong

"My project was gone when I opened the laptop today!"
Check if someone used a Private or Incognito window (which automatically wipes all local storage when closed), or if the student logged into a different browser profile. If they exported a .raynah.zip, click Project → Import Project to restore it immediately.
"The camera feed is black or says blocked."
Look at your browser's address bar next to the URL. Click the site settings or lock icon, find Camera, and set it to Allow. Then reload the page.
"Storage Quota Warning"
Browsers allocate a generous but limited amount of disk space to websites. If an animation exceeds hundreds of frames, download your .raynah.zip file to free up local space.