《Concept》 Tutoring and learning centers

AyosGawa Aral

A marketing site with a 3D scroll hero and a working 17-screen demo dashboard for a fictional AyosGawa product that tracks session packages for Philippine tutorial centers. A concept with sample data.

Concept · 2026

Concept · fictional business · sample data

Aral home page as a Facebook post: the whole landing page in columns.

The problem

Tutorial centers sell packages of sessions, then track them in notebooks, Excel and chat threads. Parents ask how many sessions are left, missed sessions need make-ups, and payments arrive as screenshots. Inquiries from Facebook, Messenger and walk-ins are scattered across several places.

The idea

On this page, a package of 12 sessions becomes a counter you can watch. Attendance counts it down, a missed class flies onto the make-up pad, and the parent's balance ring fills. The tutor's note becomes a parent message that writes itself, and scattered inquiries fly into one lead list.

The story

  1. Cover slide for AyosGawa Aral.
  2. The 3D hero with a tray of 12 session blocks.
  3. The session counter going down as blocks flip orange.
  4. A missed session flying onto the make-up pad.
  5. The parent's balance ring and message.
  6. An AI parent update drafted from a tutor's note.
  7. The demo dashboard's Today screen for attendance.
  8. The demo dashboard's analytics screen with sample charts.
  9. The AI agents screen, each with a human-approval guardrail.

Screens

  • Aral home page as a vertical story.
  • Aral home page, carousel slide 1.
  • Aral home page, carousel slide 2.
  • Aral home page, carousel slide 3.
  • Aral home page, carousel slide 4.
  • Aral home page, scroll image 1, a column of the full page.
  • Aral home page, scroll image 2, a column of the full page.
  • Aral home page, scroll image 3, a column of the full page.
  • Aral home page, scroll image 4, a column of the full page.
  • Aral demo dashboard: the Today screen with attendance.
  • Aral demo dashboard: session packages and balances.
  • Aral demo dashboard: parent updates waiting for approval.
  • Aral demo dashboard: the lead list from every channel.
  • Aral demo dashboard: payments recorded with references.

What it does for the business

If this were a real product, a center would always know how many sessions each student has left. Make-ups would be booked, payments recorded with a reference, and parents would get clear updates after approval. Inquiries from every channel would sit in one list.

Figures marked sample are illustrations, not real results.

How it's built

  • The hero is a tray of 12 session blocks. Scroll flips them orange as sessions are attended, and the counter goes from 12 down to 4.
  • A missed session turns red and flies onto the make-up pad, so the make-up is visible, not buried in a chat.
  • Under reduced motion the tray shows its finished state. Without WebGL a flat 12-square grid is shown instead.
  • Staff record a payment reference. A screenshot is never proof of payment.
  • Five AI agents each have a human-approval guardrail, and parent updates are AI drafts that a person edits and approves.

HTML · CSS · JavaScript · Three.js · GSAP