STiLE — Plug and Play: Video Archive

Hosted on the videoGen frontend · crawled from stile.hk › Plug and Play · CC BY-NC-ND 4.0 · videos re-encoded 720p for hosting

RISE Scenario Development Competition 2026 — Briefing
Interactive guide to the RISE framework, competition rules and design decisions.
Open briefing →
3Issues covered
5Contributions
23Videos (85.9 min)
2PDF documents
25Transcripts
240 MBHosted bundle

What is "Plug and Play"? A STiLE scholarship category of ready-to-use teaching objects — video mini-lessons, flipped interview sets, narrated explainers with Kahoot quizzes, and lesson handouts — that language practitioners can drop straight into their own courses. Every item except №79 was published video-first, with no PDF galley.

Vol. 1 No. 1 (2023)

邏輯重音──有聲語言表達手機微課 (Logical Stress — Mobile Micro-lesson)

Tao Ren (HKUST) · 15 Mar 2023 · DOI 10.59936/stile.v1i1.79 · Putonghuapronunciationportrait 720×1280

Summary. Two Mandarin micro-lessons on logical stress (邏輯重音): a 26-second video abstract explaining the interactive workflow (watch → self-record → listen-and-compare), and a 6-minute chaptered slide-deck lesson drilling the concept with worked sentence examples. Portrait, mobile-first, chalk-style icons and a hand-drawn sun mascot.

Video abstract (0:26) · transcript
Scholarship lesson (5:55) · transcript
Annotation. The only text-free contribution: video-only publishing. Analysis. Mobile-first micro-learning — short, self-contained, production-oriented (learner records and compares). The choral phrase-drilling trips up ASR, so its transcript reads as a lesson script. A model of minimal, single-concept micro-lectures.

Accurate Use of Schwa in British English

Ryan Windsor (Lingnan University) · 15 Mar 2023 · DOI 10.59936/stile.v1i1.80 · British Englishschwacartoon avatar

Summary. A two-part video series plus Padlet page. Part 1 trains perception/production of /ə/ in polysyllabic words; part 2 contrasts stressed and unstressed words at sentence level. Learners upload their own recordings to Padlet, which becomes an archive of learner productions.

Video abstract (0:42) · transcript
Lesson 1 — word level (3:52) · transcript
Lesson 2 — sentence level (4:16) · transcript
Annotation. Near-static cartoon presenter with speech bubble and giant phoneme glyphs (e → ə) on a flat patterned background. Analysis. A perception→production→community-output arc in under 9 minutes; the Padlet upload turns private practice into a peer-visible corpus. Closest STiLE item to what our videoGen pipeline can already generate.

Vol. 2 No. 1 (2024)

Creative Problem Solving and Communication in Entrepreneurship

Yan Xia (PolyU) · 29 Jul 2024 · DOI 10.59936/stile.v2i1.162 · flipped learningpresenter + slides · lesson-plan PDF

Summary. Nine interview videos with four local young entrepreneurs packaged as four flipped plug-and-play sets (Creative Problem Solving ×2, Persuasive Communication ×2), each following 40-min pre-class prep → 20-min in-class warmer → existing materials. The PDF documents the design and lesson plans.

Video abstract (1:27) · transcript
Interview 1 — communication skills (3:16) · transcript
Interview 2 — discovering your niche (4:53) · transcript
Interview 4 — challenges (5:56) · transcript
All 9 interviews + PDF + remaining transcripts
FileLengthLinks
162-submission.pdf (design + lesson plans)PDF · text
162-submission03 — creative problem solving (cont.)4:50video · transcript
162-submission05 — pitching / judges5:42video · transcript
162-submission06 — sustainability & strategy4:43video · transcript
162-submission07 — business language use4:30video · transcript
162-submission08 — start-up questions5:21video · transcript
162-submission09 — origin story / proposal3:46video · transcript
Interviews 1 (01), 2 (02) & 4 (04) are embedded above; interviews 3–9 and all transcripts are linked here. (Video 04 was used as the embedded sample of the presenter+slides format; the full set 01–09 is in the article folder.)
Annotation. Live talking-head (bokeh background) on ~25% of frame, animated icon slide panel beside it, section title cards, music bed with on-screen credit. Analysis. Authentic HK start-up testimony converted into flipped input; interviews average 4–6 min — within pre-class homework attention span. The visual system is consistent across all nine videos, i.e. a reusable template — exactly what our split-presenter template should replicate.

Multimodal Modules for Language Proficiency Enhancement

Michelle Tam, Eva Li, Agnes Tsang, Evangeline Hung (CityU HK) · 27 Sep 2024 · DOI 10.59936/stile.v2i1.167 · EAP grammarPowToon whiteboardKahoot

Summary. Four interactive grammar micro-modules for first-year EAP writing students — Asking Questions in English, Complex Noun Phrases, Making Comparisons, Singular or Plural — each a ~5-min whiteboard explainer paired with a live Kahoot challenge quiz (links embedded in the narrated abstract).

Narrated abstract with QR codes (1:12) · transcript
Module 1 — Asking Questions (5:08) · transcript
Module 2 — Complex Noun Phrases (5:02) · transcript
Modules 3–4 + transcripts
FileLengthLinks
167-video3 — Making Comparisons5:32video · transcript
167-video4 — Singular or Plural3:00video · transcript
Annotation. PowToon whiteboard style: a real hand writes the title stroke-by-stroke, cartoon character + colour-coded question marks, wipe transitions, ends on "Let's practice". PowToon watermark visible in frame. Analysis. Motivation is the stated problem (non-credit-bearing course), so grammar is gamified into watch-then-quiz modules. This is the item that makes the PowToon-replication question urgent — see the open-source analysis below.

Vol. 4 No. 1 (2025)

"Sorry to interrupt you there, but could you engage in more authentic spontaneous real-time discussions in EAP?"

Richard Nickalls (Lingnan University) + actors · 20 Jan 2025 · DOI 10.59936/stile.v4i1.179 · live actionoral assessment · lesson handout PDF

Summary. Two deliberately contrastive discussion videos — an ineffective one (scripted monologue, awkward interruptions, disengaged participants) versus an effective one (eye contact, turn-taking, polite interruption) — plus a five-task lesson handout: pair-work intro, video comparison, preparation-performance link, strategy identification, personal reflection.

Video abstract — author interview (1:06) · transcript
Video 1 — ineffective discussion (2:42) · transcript
Video 2 — effective discussion (2:26) · transcript
Annotation. Live-action campus filming, black title cards with funding + credits, humour and exaggeration by design. Analysis. Negative-exemplar pedagogy: students diagnose failure before success. The handout PDF makes this the most classroom-ready item — and the only one teaching discussion process rather than language form. Live action is the one STiLE template our TTS pipeline cannot generate; treat as an "import your own footage" track.

Replicating PowToon with open-source tools

№167's whiteboard style (hand writes text stroke-by-stroke, cartoon props, wipe transitions) is the key target. GitHub offers no single "open-source PowToon", but the effect decomposes into three parts — SVG stroke drawing animation, scene composition/timeline, and video rendering — each with mature open-source options:

remotion-dev/remotion ★ 58.7k · TypeScript · custom license (free for individuals & small teams)

Make videos programmatically in React; renders via headless Chrome. Has a @remotion/shapes + SVG path animation ecosystem; the community starter crebro/remotion-drawing-starter is specifically a whiteboard "drawing" explainer starter. Closest full-stack match to our existing HTML→capture→ffmpeg pipeline.

motion-canvas/motion-canvas ★ 19.1k · MIT · TypeScript

Code-first animation with a live preview editor and a timeline; excellent for hand-drawn-style explainers. MIT-licensed, so no licensing concerns for a public platform. Best fit if we want a visual timeline editor for scene sequencing.

CSS/SVG stroke reveal (no new dependency — recommended first step)

The PowToon "hand writing" effect is just stroke-dasharray/stroke-dashoffset animation over an SVG path, plus a hand PNG that follows the path via offset-path. This is pure CSS, which means it works inside our existing slides/index.html + capture.mjs freeze logic with zero new infrastructure. Libraries like svg-text-animate (convert text to stroke paths) can automate the path generation.

Other relevant projects

techdou/whiteboard-video (MIT, Python) — agent skill that turns SRT + images into whiteboard videos; useful reference for the batch pipeline shape. OmarAMokhtar/rasma (GPL-3.0, C++) — whiteboard animation maker for explainer videos. Manim and OpenToonz are powerful but over-scoped for slide-style lessons. Generic "whiteboard animation" GitHub searches return mostly abandoned hobby repos (<20 stars) — avoid.

Recommendation. Don't adopt a full PowToon clone. Add a whiteboard-write scene type to our existing deck pipeline using CSS/SVG stroke reveal (works with the current freeze/capture logic), and keep Motion Canvas as the fallback if we later need true frame-accurate hand-drawn motion. Remotion is the industry standard but its license and React stack would replace, not extend, our current pipeline.