hyperframes-slide-work-kindergarten-notice

Kindergarten Parent Notice Slides

When to use

• Kindergarten/daycare parent guides, play records, project activity sharing, next play preview slides
• When showing classroom/outdoor play photos taken by teachers and observation sentences in a soft and trustworthy way
• Reference style: light yellow grid background, white daisies, small bees, cream cloud/scallop panels, orange labels, dark blue main titles

Basic aesthetic

• Background: #FBE987 series yellow + white grid around 64px. Do not use yellow that is too dark.
• Main colors: dark blue #006FB4, orange #FDB515, cream #FFF7CE, white panels.
• Font: Paperlogy first. Titles 800-900, body 700 or higher. For early childhood education notices, Korean readability comes first.
• Decorations: Make daisies and bees with CSS/SVG. No random placement, only 2-5 per slide.
• Photos: If real photos are available, use assets/ relative paths. If not, use .photo.placeholderand keep only patterns with a warm educational field feeling.
• Text: Sentences shown to parents should have an observation-record tone rather than an explanatory tone. Write like “The children did ~”, “They showed interest”.

Layout archetypes

Type	Use	Structure
bee-cover	Cover	Curved top title + large cloud panel + period label + flower garden decoration
notice-story	Start of play	Center white dashed panel + large body text + 2-3 circular photos
hex-gallery	Detailed activity summary	Left explanation list + right hexagonal photo cluster
teacher-note	Long observation record	Top photo strip + 2-paragraph body + underline emphasis
next-play	Next play preview	3-column cards, each card with label, photo, and teacher support plan

HTML structure

All scenes are 1920×1080, clipand include timing attributes.

<div id="s-2" class="scene clip notice-story"
     data-start="6" data-duration="6" data-track-index="0">
  <div class="pill-title">놀이의 시작</div>
  <section class="paper-panel">
    <p class="story-text">아이들은 바깥놀이에서 ... 관심을 보였습니다.</p>
  </section>
  <div class="photo photo-round photo-a"><img src="assets/play-01.jpg" alt="..." /></div>
  <div class="bee bee-bottom" aria-hidden="true"></div>
</div>

Required CSS blocks

• html, bodyApply Paperlogy CDN and font stack to
• .scenefor the yellow grid background:

.scene {
  width: 1920px; height: 1080px; position: relative; overflow: hidden;
  background-color: #FBE987;
  background-image:
    linear-gradient(rgba(255,255,255,.78) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.78) 2px, transparent 2px);
  background-size: 64px 64px;
  color: #111827;
  font-family: "Paperlogy", "Inter", "Helvetica Neue", Arial, sans-serif;
  word-break: keep-all;
}

• Panels use dashed borders and large radius:

.paper-panel {
  background: #fff;
  border: 5px dashed #F6C65B;
  border-radius: 28px;
  box-shadow: 0 10px 0 rgba(255, 181, 21, .18);
}

• The cloud cover uses border-radius: 50% multiple circles overlapped, or instead of clip-path use a stable pseudo-element.
• Hexagonal photos use clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%).
• Flowers and bees are made with .daisy, .bee a common class and add aria-hidden="true".

GSAP entrance

const tl = gsap.timeline({ paused: true });
tl.from("#s-2 .pill-title", { y: -28, opacity: 0, duration: 0.55, ease: "back.out(1.8)" }, start + 0.2);
tl.from("#s-2 .paper-panel", { y: 32, opacity: 0, duration: 0.7, ease: "power3.out" }, start + 0.45);
tl.from("#s-2 .photo", { scale: 0.82, opacity: 0, duration: 0.65, stagger: 0.12, ease: "back.out(1.7)" }, start + 0.8);
tl.from("#s-2 .story-text", { y: 18, opacity: 0, duration: 0.65, ease: "power2.out" }, start + 1.05);
window.__timelines["main"] = tl;

Writing principles

• The body text of one slide is 4-8 lines. In the parent notice tone, do not compress too much.
• Numbered lists should be short, like 1., 2.. Separate long explanations into the next slide.
• Even with many photos, no more than 4 per slide. Unify photos under one rule: circles, rounded rectangles, or hexagons.
• Fix the flower bed decoration at the bottom of the screen near bottom: -8px so it does not overlap the body area.
• overview.htmlWhen creating hyperframes-overview-edit, always include the Edit button function of

Verification

After work:

npx hyperframes lint topics/<주제>
bash .codex/skills/hyperframes-overview/serve.sh topics/<주제> 8765

First present the overview.html URL to the user. Run video rendering only when the user explicitly requests it after OKing the overview.