Internal design notes. Not visitor-facing copy.

Direction A · Black with deep blue skies · Motion demo

Design handoff

Comparison mockup for the proposed domain christmas.wheelerbc.org. Nothing is deployed and no services are connected. The three reference videos were supplied as written descriptions and interpreted from that text; they were not viewed.

Video blend preview: what changed

• Hero scenes. Each chapter hero now plays its Google Flow clip in place of the layered illustration: Christmas on the Avenue and Bethlehem Experience; Watch Night shows a photograph of fireworks over the church. The clips in the media folder are unmodified copies of the approved files. The illustrated scene beside the Bethlehem story is unchanged.
• Edge blend. The page background is pure black. CSS masks feather each clip into it: a horizontal fade on the sides, a longer fade at the top, a shorter one at the bottom, and a soft ellipse that keeps the guiding star and its rays at full strength inside the top fade. Fade lengths, crop and star position are set per clip and per screen size as CSS variables in styles.css.
• Page sky. A sparse field of small, cool white stars sits behind each hero and shows through the feathered edges. It ends near the horizon so no stars appear below the ground.
• Framing. From 900px wide the whole 16:9 frame is shown. Below that the clip is cropped around the guiding star and the main subject, so some outer figures leave the frame on phones.
• Playback. Clips play muted and inline, only while their hero is on screen, and loop with a short dissolve from the last second into the first. Pause motion holds the current frame. With the system reduced-motion setting on, the clip is never loaded and a still from the same clip is shown.
• Chapter passages. The previous clip’s still dissolves into the next clip while the hero is held. The separate travelling star was removed because each clip carries its own.
• Gift total. Still live page content written in stars, now part of the Christmas on the Avenue opening. While motion is playing the opening is held in place: scrolling fades the clip and the chapter title into the black sky, stars appear across it, and they travel together to spell the total under the heading “Written in the stars”, with the count and the sample label as real text beneath. Scrolling back reverses it. Scrolling never changes the count. With motion paused or reduced, the clip and the finished star-written total are shown one after the other, with no pinned passage. The digit stars are larger, brighter four-point stars with a glow; the decorative stars dim as the number forms.
• Message, one paragraph at a time. Scrolling on from the gift total, the digit stars drift back to their places in the sky. The Star of Bethlehem is already there: it takes over from the clip’s guiding star as the clip fades at the top of the chapter, in the same place, and stays above the number while the stars gather. The chapter message then appears in the held opening one paragraph at a time, flat and facing the reader: each paragraph fades in, holds while the visitor reads, and gives way to the next as they scroll. The bright star makes one lap around the wording, a little further with each paragraph, and swells briefly every several seconds. With the closing paragraph it settles in the top right corner of the opening, the Give a Toy and Amazon Wishlist buttons appear beneath the text, and a soft spotlight falls from the star onto them: a feathered cone that ends in a rounded pool of light around the buttons. A small arrow at the foot of the opening shows there is more to scroll; it fades once the buttons are lit. With motion paused or reduced every paragraph and the buttons are shown together as a plain column, and the moving star, light and arrow are hidden. Text size, star, light and arrow are in the “MESSAGE PANELS” block of styles.css; timings are in setGather() in app.js.
• Giving. “Give in Person” opens a popup with the church address, a copy button and the drop-off dates and hours (to be announced). “Shop the Amazon Wishlist” is disabled until the link is supplied. The separate “Bring a gift to the Avenue” section and the goal-progress section were removed.
• Following the star to Bethlehem. When the Christmas on the Avenue opening is released, the bright star leaves its corner and, as the visitor keeps scrolling, travels down the screen to the place where the guiding star stands in the Bethlehem clip. It arrives as the Bethlehem hero is held in place; the clip then fades in around it and the travelling star gives way to the one in the footage. This replaces the still-image dissolve between those two chapters. Scrolling back reverses it. With motion paused or reduced there is no travelling star.
• Event photographs. Three photographs from last year’s Bethlehem Experience sit before the invitation, and a Christmas Production section (Sunday, December 20, 2026, starring guest recording artist Fred Hammond) follows them with five photographs from last year’s stage production. Photographs are feathered into the black page on all four sides. The camel caravan in the story illustration now stands on the ridge instead of above it.
• Bethlehem background video. A short clip from last year’s event (Mary and Joseph at the manger) plays muted behind the “Bethlehem Experience” photo heading, dimmed and feathered into the page. It is a web copy of the supplied clip, resized, with the sound removed and its end blended into its start so it loops smoothly. It plays only while on screen; with motion paused it holds, and with reduced motion a still from the clip is shown.
• Share the light. The four interactive pieces (Gratitude Board, Bible Reading Plan, Holiday Card, Invite One Person) are no longer spread through the chapters. A bar fixed to the bottom of the screen opens any of them from anywhere on the page, in one panel with a tab for each (a side panel on desktop, full screen on phones). Each piece has a small star that lights when the visitor uses it, and the panel shows how many of the four are lit. The Bethlehem and Watch Night heroes keep one button each that opens the matching tab. Opens and uses are counted on this device and listed in the volunteer demo view; in production they would be sent as analytics events (light_open and light_use, with the piece name).
• Gift total in the header. The header shows the current gift total next to Pause motion and links to the star-written total. It updates with the volunteer counter.
• Review control. The Edge blend switch now sits in the mockup notes at the foot of the page. It is not part of the visitor site.
• Not yet done. The clips still contain their original audio tracks (played muted) and are not compressed for the web. The sections below describe the motion demo this preview was built from.

Demonstration-only features

• Star-written gift total. 127 received and a goal of 300 are sample numbers. The count lives in this browser only. The stars are decorative type: they spell the total and do not stand for individual gifts.
• Volunteer counter. No sign-in. Production needs authorized volunteers, shared persistent storage and an audit trail.
• Amazon Wishlist. No URL was provided, so both buttons show an unavailable state. Clicks and orders never change the count.
• Gratitude board. The six reflections are samples. Submissions are saved locally as Pending review. There is no moderation queue and no public posting.
• Church event video. Empty placeholder. No footage is embedded.
• Holiday card. Local file preview only. No upload, export or sharing is implemented.
• Invitation. Copies text to the clipboard. Nothing is sent.
• Bible reading plan. Plain link to bible.wheelerbc.org. No enrollment or tracking.

Content still to confirm

• Toy drop-off dates, hours, guidelines and how toys reach families.
• Bethlehem Experience dates, times, location details and how to take part.
• Watch Night year, service time and program. Only December 31 is known, so there is no countdown.
• Whether 3826 Wheeler Avenue is also the drop-off point. It is shown as the delivery address only.

Recommended SVG and video split

• Keep in SVG and CSS: the guiding star, light beams, star fields, hills, Bethlehem skyline, stable light, the star-written gift total, all text, interface, scroll reveals and the star transition between chapters.
• Redraw as layered SVG: the caravan, Nativity and gathering silhouettes are placeholder raster art blended into the sky. Commission final vector versions, one layer per figure group, so they scale and animate cleanly.
• Optional video: one short, muted, looping atmosphere clip per chapter hero (drifting mist, star shimmer), compressed, placed behind the silhouettes with the static scene as its poster. It should never carry text or controls and should not load when motion is paused or reduced.
• Event footage: only in the Bethlehem video slot, started by the visitor, with captions.

Motion demo: what moves and why

• One journey. The three chapters are one scrolling document. The anchors #avenue, #bethlehem and #watch land on each chapter, and the header marks the chapter in view.
• Chapter passages. Entering chapters two and three, the arch is held in place with CSS sticky positioning while ordinary scrolling crossfades the previous sky into the next and the guiding star travels between its two positions. Scrolling back reverses it exactly. No wheel, touch or key events are intercepted and nothing snaps.
• Ambient motion. A few stars twinkle, the star field turns very slowly around the guiding star, the star breathes, mist drifts, hills shift by depth with scroll and pointer, and the caravan advances a short distance each time its scene comes into view.
• Nativity. Mary, Joseph, the manger and the animals never move. Only the beams, the manger glow, the mist and the stars do.
• Watch Night. The sky lifts from night toward blue dawn as the chapter arrives.
• Star-written total. Separate stars trace the digits of the gift total. The full number is drawn as soon as the page loads, with no entrance animation. The stars twinkle in place and travel to new positions only when a volunteer changes the count. With motion paused or reduced the new number appears at once. Scrolling never reads or changes the total, and a plain-text caption always states it.
• Phones. Travel distances are cut to 40 percent and the passages are shorter.

Pause, reduced motion and accessibility

• Pause motion and the system reduced-motion setting both remove the pinned passages and stop every animation, transition and scroll-driven change. Each scene is shown in its finished still state with all content visible, which is the still version of this direction. The reading position is kept when toggling.
• With reduced motion set, the page starts paused. Play motion is an explicit opt-in.
• Scrolling is native throughout. Forms, buttons and focus order are unaffected by motion, and content that has not faded in yet appears as soon as it receives focus.
• All headings and body copy are real text. Scenes carry text descriptions for screen readers.

Back to the visitor site