Before I start, I'll ask one question at a time, each with my suggestion; reply "yes" and we go with it. If you'd rather not, just say "you decide" and I'll lay out the whole plan for you to confirm.

Question 1: what is this page for, and who reads it?

I suggest A. Introducing one model: for people thinking of buying, so they warm to the bike and then book a test ride or find a dealer. That's what most motorcycle intro pages are for.

Two other possibilities:

• B. A page for a shop, rental or customiser: for riders nearby, to show which bikes you have, what you offer, and where you are.
• C. The story of one bike: your own bike, a build, or where a classic model came from. For friends and the riding circle; the details and the story matter, and there's no purchase.

Reply "yes", or pick B or C, or just tell me about your case. If you already have photos, video, specs or copy, send them along and I'll look at the material before asking more.

Question 2: what should the reader remember, and then do?

I suggest A. Remember "this is a good first bigger bike", then book a test ride. What people moving up worry about most is "can I handle it". The page takes that worry away first, then invites them to ride it once themselves.

Other choices:

• B. Remember how it looks (retro design and finish), then leave a phone number for launch news. Fits when looks are the main selling point and the price and specs aren't public yet.
• C. Remember the launch price and the launch offer, then pay a deposit. Fits when orders open before launch.

Reply "yes", or pick B or C. You can mix them too, for example take A's point and end with C's pre-order button.

Question 3: what material do you have?

Each selling point is best backed by material. I'd prepare it per point:

• Easy to ride: a 5 to 15 second riding clip, no sound needed. The clip can play with the scroll: scroll down and the bike moves forward, scroll back and it reverses. Add the numbers a beginner cares about, such as seat height and curb weight.
• Good looking: one full side-on shot plus 3 to 6 detail close-ups, for example the tank, the headlight, the instruments, the seat. Send any location shots or other colourways too.
• Not expensive: you already have from ¥29,800. If there are versions, instalments or launch benefits, tell me.
• Other: the model name, and a logo (SVG is best).

Send the original files; I'll do the cropping and compression. Missing some for now is fine, just tell me. For example, if the clip can't be shot before launch, "easy to ride" can use riding photos and the specs for now, and the clip goes in later.

That material can carry the three points: the studio photos for "good looking", the mountain road footage and the specs for "easy to ride", the price for "not expensive". With no reviews, the page has no review section and makes none up. 30 seconds is long, so I'll cut one city night section and one mountain road section, about 8 seconds each. The cutting and transcoding are mine to do.

Question 4: which direction for the whole page, and how many acts?

A. Ride along (5 acts): the promo carries the page. Scrolling down moves the bike forward, scrolling back reverses it.
1 Opening: the city night footage plays with the scroll, and the name arrives like the title cards of a film. 2 Good looking: the side-on shot first, then scrolling on, four close-ups in turn, tank, instruments, exhaust, seat, each with a line. 3 Easy to ride: the mountain road plays with the scroll, and the numbers, seat height, curb weight and the rest, come on one by one. 4 Not expensive: "from ¥29,800" in large type, with the front 45° photo beside it. 5 Book a test ride.

B. Photos first, clean (4 acts): an ordinary scrolling page, the video looping in the background only, lighter to run.
1 The front 45° photo with the name and one line. 2 Good looking: four close-ups as a group. 3 Easy to ride: the numbers set large over the looping mountain road. 4 Price and booking on one screen.

C. Screen by screen on a phone (6 acts): one picture and one line per screen, swipe up for the next, booking on the last. Fits most people arriving from Xiaohongshu or a WeChat post. The cost is limited room for detailed specifications.

I recommend A. The promo is your strongest material, and letting the reader scroll the bike forward says "easy to ride" better than words. The order warms them with the looks, then takes away the worry about handling, then gives the price.

A has one condition: if the promo cuts very fast, a new shot every second or two, playing it with the scroll will stutter. In that case I'd use B instead. If you can, send the promo first; I'll confirm after seeing it.

Reply "yes", or pick B or C, or take parts from several directions.

Three or four seconds a shot is right. An 8-second piece holds two or three shots, so crossing a cut feels like a film cut, not a stutter. When the promo arrives I'll look at the aspect ratio and the duration, then tell you which seconds to use for the night ride and which for the road.

Act 1 of 5: opening
This act is about the name: it should make someone want to ride as soon as the page opens.

Question 5: how should the opening look?

I suggest A. Widescreen opening: black bars above and below, like watching a film. It opens on the first frame of the night, and the name "Tulan Wander 400" rises on the lower bar. Scroll down and the bike starts through the city, the name fades, and a line takes its place. On a phone held upright the picture is a strip across the middle, with no vertical cut needed.
Why: it comes closest to the title cards you chose. The type sits on the black bar, so the street lights and neon don't fight it.

Other ways:

• B. Full bleed: the video fills the screen, the name in the lower left, a dark gradient behind the text. The strongest on a desktop. But a phone in portrait shows less than a third of the width, and the bike can easily move out of frame once it starts moving; a vertical cut would be better.
• C. Words first: the page opens on "WANDER 400" in large type on black. Scroll down and the type grows and leaves the screen while the night ride comes out from behind it, then plays with the scroll. The first screen doesn't wait for the video, at the cost of a longer opening scroll.

Reply "yes", or pick B or C, or describe what you have in mind.

Mostly on a phone, direction A still stands. Scrolling down on a phone moves the bike forward and scrolling back reverses it. On a phone, act 1 looks like this: the night ride fills the width, about a third of the screen high, black above and below, the name on the black below it. On a desktop I'll crop to a wider cinematic frame. A phone screen is narrow, so cropping further would make the picture too small; on a phone the full landscape frame stays.

Overall style
"Premium" decides the colour, the type and the pace of every act that follows, so settle it first and then come back to the line for act 1. That line's tone has to follow the style too.

Question 6: which kind of "premium" do you mean?

I suggest A. Dark cinematic: the whole page dark, continuing from the black of the opening. Text off-white, Chinese headings in a light Song serif, the English bike name in spaced capitals. One accent colour only, taken from the bike, for the price and the booking button. Motion slow, mostly fades and slow pushes, no bouncing. One thing per screen, with space around it.
Why: the opening is black and the night footage is dark; a dark page carries through without a break. On a phone, the landscape strip inside a dark page reads like a cinema screen. The same strip on a light page reads more like a video embedded in an article.

Other ways:

• B. Bright and open: a light warm grey ground with fine black type and a lot of space, like a high-end car brochure. The opening is still a black widescreen; at act 2 the page turns light, as if the lights came on. If the studio photos are on white, this is the smoothest fit.
• C. Retro catalogue: a cream paper ground, large Song serif headings, fine rules and small captions, like a catalogue from an old motorcycle maker; the most retro of the three. It also turns light at act 2. The cost is that it is literary and slower, a little away from the speed of a night ride and a mountain road.

A has one condition: the studio photos should be on black or dark grey. On white, they would sit in a dark page like white boxes, and then either retouching changes the background or we choose B. If you can, send the six photos; one look at the background settles it. If Tulan has brand colours, a typeface or a logo, send those too; brand guidelines win.

Reply "yes", or pick B or C. You can also send a brand page or an ad that feels premium to you.

Not knowing the photo backgrounds is fine; I'll look when they arrive. A dark background goes straight in. A white one, and I'll come back to you; retouching can change it.

Question 7: where does the brand's dark green go?

Off-white is already the text colour in A, so that's settled. Dark green can go several ways.

I suggest A. Dark green across the page: the page ground is dark green, all the text off-white, the booking button an off-white block with dark green type, and only these two colours on the page. The "black bars" around the opening video become dark green too. Dark green is deep enough to keep the cinema feel. If your green is on the bright side I'll push the ground darker so the video sits on something dark.
Why: every screen is Tulan's colour, and the page reads as yours at a glance. Dark green with off-white is retro in itself, which suits a retro street bike.

Other ways:

• B. Black opening, dark green from act 2: the opening keeps true black bars. When the title cards end and act 2 arrives, the ground moves from black to dark green within a second, and stays green with off-white type after that. The opening is the most film-like, and the change feels like "the titles are over, the bike arrives". The cost is no green on the first screen.
• C. Black page, dark green as an accent: green only on fine rules and small labels, the button off-white. The gain: if the studio photos are on black, the bike looks parked straight on the page, with almost no edge to the photo. The cost: green and black are close in value, so on a black ground the brand colour is hard to see.

If you have the exact values for the green and the off-white (something like #1F3D2E), send them and I'll use them. If not, I'll take close ones; you can adjust after seeing the page.

Reply "yes", or pick B or C. Once the colour is set we go back to act 1 and that line.

Act 1 of 5: opening

Question 8: once the name fades, which line takes its place?

The line is in the light Song serif, in the place the name was, like the first subtitle of a film. It has to fit one line on a phone, so roughly ten Chinese characters is best.

I suggest A. "After work, take the long way home."
Why: the opening is a night ride through the city, and the line matches the picture. Wander means to roam, so the line says what the name means without repeating it. The ride home from work is something everyone 25 to 35 has every day. The tone is calm, no slogan, which fits the premium you asked for.

Other lines:

• B. "From the street lights, to the mountain haze.": in Chinese the line uses 岚 (lán), “mountain mist”, which is also the second character of the brand name 途岚, and it brings in the mountain road of act 3 early. The most poetic, and the reader takes half a second longer to get it.
• C. "Your first big bike.": speaks straight to someone moving up, and a reader knows at once who the bike is for. The plainest, and the least film-like.

Reply "yes", or pick B or C, or change a few words, or write your own line.

If you want to hand the later questions to me too, just say "you decide the rest". I'll lay out each act on my suggestions and send it with the material list for you to confirm.

Act 1 of 5: opening
One thing left in act 1. Scrolling inside this act holds the page still; the scroll only moves the video forward, about three screens to the end. After that the reader goes to the side-on shot in act 2.

Question 9: once the night ride ends, how does the page move to act 2?

I suggest A. Close the screen: at the end of the video the dark green bars above and below close towards the middle. The picture narrows until it is a thin line and is gone, like the end of a film's titles. Only dark green is left; scroll on and the side-on shot rises from below. Scroll back and the screen opens again.
Why: the opening is the titles, and closing the screen tells the reader the titles are over and the bike is about to arrive. The close is one slow move and the screen stays clean, which fits the premium you asked for. The cost is about half a screen more of opening scroll.

Other ways:

• B. Just scroll away: the opening slides up like an ordinary page and act 2 follows from below. The simplest and the smoothest to scroll. The cost is no transition between the opening and act 2, so less film.
• C. Cover it: the video holds on its last frame and act 2 slides up over it like a sheet of paper, the covered picture dimming. That page-turn feeling is more like a catalogue than a film opening.

Reply "yes", or pick B or C.

Act 1's transition is A, close the screen. I've laid out the rest on my suggestions. Act 1, the style and the colours stay as settled; everything else is my call, so say where it doesn't fit.

Tulan Wander 400 intro page
For readers aged 25 to 35 buying their first bigger bike. They should leave remembering easy to ride, good looking, from ¥29,800, and then book a test ride.

Storyboard

Why this order

• Act 3 repeats the opening's screen: open, play, close, which ties it back to the opening. A stretch of ordinary scrolling photos sits between the two videos, so the page isn't held still the whole way.
• Only four numbers. Seat height and weight answer "can I handle it"; power and torque are the numbers everyone compares when buying. Displacement is already in the name, so it isn't repeated.

Page settings

• Style: dark cinematic. Dark green ground, off-white type, the button off-white with dark green type, and only these two colours. Motion slow, no bouncing.
• Type: Chinese in a light Source Han Serif, free for commercial use. The English bike name in spaced capitals, serif.
• Device: phone in portrait first. On desktop the two videos are cropped to a wider cinematic frame, the photos sit in the middle, and dark green stays around them.
• Language and sound: Chinese only, silent throughout.
• Testing: I'll test in simulated iPhone and Android browsers first, then send you the link. Video that plays with the scroll is the thing most likely to break inside WeChat, so that one needs a real phone in WeChat; I'll ask you to check it.

Material list

What you have but haven't sent: send the original files. Sending through WeChat compresses them; tick "original" for images, send video as a file, or use a cloud drive.

• The promo: the 30-second original, sound not needed. I'll pick the seconds for the night ride and for the road and send them to you first. The cut, the transcoding into a format that plays smoothly with the scroll, and the poster frame are mine to do.
• The six studio photos: originals, no cropping. I'll check the background first and come back to you if it's white.
• The spec sheet: send the original. For weight, say whether it is wet or dry; for power and torque, include the rpm. The numbers and units on the page follow the sheet.

Still missing:

• The four close-up lines: I'll write four from the photos, roughly ten Chinese characters each. Where they touch on material or finish you'll need to confirm. If there's a product handbook or selling-point document, send it and I'll use its wording. Without one, I'll only describe what the photos show.
• Where the booking button leads: your existing booking page or an online form is fine; send the link. If there isn't one yet, a booking phone number that dials on tap.
• The logo: SVG is best; AI, EPS or PDF will do. Without one, the word "Tulan" set in type for now.
• Brand colour values: one each for the green and the off-white, for example #1F3D2E. Without them I'll take close ones.
• The footer: the company's full name, under the last act. If the page sits on your own domain, the footer also carries the registration number.
• The launch date: tell me when it's fixed; the page has to be ready before it. If the price isn't public when the page goes up, I'll put a small line under it: "Subject to the price announced at launch.".

Reply "yes" and I'll start building. Where material is missing I'll put marked placeholders and swap them in when it arrives. To change an act, tell me the number and the idea.

Decided: the storyboard and the material list stand as above, plus an English version, Chinese first.

The page settings said "Chinese only"; they now read as follows. These are my calls; say where they don't fit.

How the English version works

• Switching: Chinese and English are separate, one shown at a time. It opens in Chinese, with a small "EN" in the top right; tap it for English, tap "中文" to go back. It remembers the last choice. The English version also has its own link, for friends or press: it opens in English.
• Readers: I'll write for people in China who read English more easily, for example foreign riders. The price stays in renminbi and booking goes to the same place. If the English is mainly for people abroad, tell me; act 4's price and act 5's booking both change.
• Type: English in Cormorant Garamond, a light serif close in feel to the light Source Han Serif, also free for commercial use. The spaced capitals of the bike name use it too.
• Line breaks: English runs longer than Chinese, so some lines take two lines on a phone. I'll break by meaning, for example the opening line after "After work,". I'll check both languages screen by screen at phone width.

English copy
The English is written for English readers, not translated word for word.

I'll write the four close-up lines in Chinese, then the English, and send both for you to confirm. Before launch, have a native English speaker read the English once.

More material

• Tulan's English name: if the logo has one, follow the logo. If not, tell me how the brand should read in English; until then I'll use the pinyin, Tulan.
• The English booking entry: if the booking page or form has an English version, send the link. If not, the English button leads to the Chinese form too, with a small line under it saying the form is in Chinese.
• The English spec sheet: send it if there is one. If not, I'll use the usual industry English for the labels and follow the Chinese sheet for numbers and units.

Send the material in the next couple of days; that's fine. Tell me any time you want the English copy changed; it doesn't hold up the build. I'll start now: five acts in phone portrait with the language switch, marked placeholders where material is missing, swapped in when it arrives. When the first version is up I'll send you the link, and it opens straight on a phone.

Page: http://127.0.0.1:4380/skill-moto/index.html

Self-check: Chinese and English at three sizes each, plus WebKit and reduced motion. No errors, no horizontal overflow, no flash on first paint. The video and captions follow the scroll and reverse when scrolling back. Reloading mid-page stays where it was. Frame interval P95 16.8ms. Fixed: the rise(normal) error; image height not capped to the screen, which left act 2 blank at the top at 1280x710 and pushed the price off the first screen at 1920; the last word of the English title stranded on its own line; a 1px line left after act 3 closed. Not tested on a real device or in WeChat.

Placeholders: two videos, six studio photos, four close-up lines, the spec values, the logo, the booking link, the brand colour values, the footer, the English brand name (Tulan for now). Fonts load from Google Fonts now; they need to be self-hosted before launch.

Skill issues:

1. framework.md said rise(normal), which actually errors. Corrected now.
2. It only said enter needs the whole block on screen before it plays, without warning that a large image can be slow to appear because of it.
3. When a zone reaches its last pixel, exit only gets to 99.99%; a clip ending at exactly 50% leaves a line, so write 51%.
4. It doesn't say how to load fonts. Google Fonts can't be reached from mainland China, and Chinese fonts need subsetting.