SCRATCH TO REVEAL
​
SETUP

- "Lapis de Spur Original" is the bottom layer, always fully

visible, filling the whole banner.

- "Frost Group" sits directly above it and contains "Frosted Headline",

"Frosted Body Text" and "Lapis de Spur Frosted", aligned

exactly over the original.

- "Spur Logo", "Logo" and "CTA" sit above "Frost Group" and are never

affected by the scratch — they stay fully visible at all times.

SCRATCHING

- Apply one alpha mask to "Frost Group" as a whole, so all three of its

layers are erased together by the same strokes.

- On mouse move or touch drag over the banner, erase from the mask at

the pointer position using destination-out compositing.

- Erased areas are permanent — the mask accumulates and never resets.

- Interpolate between the previous and current pointer position so fast

movement leaves a continuous line, not a dotted trail.

- Brush: a circle with a slightly irregular, hard edge — no soft

feathering. Diameter 30% of the banner's shortest side.

- Never move, scale or fade "Frost Group" while scratching. The reveal

happens only by erasing mask pixels.

COMPLETION

- When 40% of the mask is erased, stop accepting input and fade the

remaining contents of "Frost Group" out over 400ms, ease-out.

- The state is then locked — the frost does not return.

SIZING

- All positions and sizes are relative to the banner, with no fixed

pixel dimensions, so the effect works at any format.

MOBILE

- Touch drag behaves identically to mouse.

- Prevent page scroll while dragging inside the banner.
​

COMPARE SLIDER

SETUP

- "Green Room" is the bottom visible layer, always fully rendered,

filling the whole banner.

- "White Room" sits directly above it, aligned exactly over it.

- "Slider" is the draggable handle, positioned above both room images

and vertically centred.

- "Headline", "Body Text" and "CTA" sit above everything.

MASK

- Apply a hard-edged rectangular mask to "White Room" only.

- The mask spans from the left edge of the banner to the horizontal

centre of "Slider": "White Room" is visible left of the handle,

"Green Room" shows to the right of it.

- The mask edge is crisp — no feathering, blur or gradient.

- Never move, scale or fade "White Room" itself. The reveal happens

only by changing the mask width.

HEADLINE INVERSION

- Set "Headline" fill to pure white (#FFFFFF). This is required —

difference blending only produces a true negative from white; any

other fill colour gives a partial, muted shift instead.

- Set "Headline" to mix-blend-mode: difference.

- "Headline" must blend against the room images, not against a local

background. Ensure that:

- "Headline" is not wrapped in a group that has its own opacity below

100%, transform, filter or isolation — any of these create a new

stacking context and break the blend.

- "Headline" itself stays at 100% opacity and has no background fill,

text shadow or stroke.

- "White Room" and "Green Room" are in the same stacking context as

"Headline", so they are the backdrop the blend samples.

- isolation is not set to isolate on any ancestor of "Headline".

- The result updates live as "Slider" moves: the portion of the

headline over "White Room" renders inverted against the white room,

the portion over "Green Room" renders inverted against the green

room, and the switch happens exactly at the mask edge — including

mid-letter when the edge falls inside a glyph.

- Do not apply any blend mode to "Body Text", "CTA" or "Slider" — they

render normally at all times.

SLIDER

- "Slider" starts at 35% of the banner width.

- On mouse drag or touch drag, "Slider" follows the pointer's

horizontal position and the mask edge updates with it in real time,

with no easing or lag.

- Dragging can start anywhere inside the banner, not only on the handle

itself.

- Clamp "Slider" so it never leaves the banner — it stops at 0% and

100% of the width.

- On mouse hover over the banner, scale "Slider" to 105% over 150ms,

ease-out. Return to 100% on leave.

- "Slider" moves horizontally only; its vertical position never

changes.

IDLE HINT

- If there is no interaction 2s after load, animate "Slider" 8% of the

banner width to the right and back over 1.2s, ease-in-out, looping

with a 1.5s pause.

- Stop the hint permanently on first interaction.

SIZING

- All positions and sizes are relative to the banner, with no fixed

pixel dimensions, so the effect works at any format.

MOBILE

- Touch drag behaves identically to mouse.

- Prevent page scroll while dragging inside the banner.
​

DAILY COUNTDOWN TO 17:00

SETUP

- "HOURS TIMER", "MINUTES TIMER" and "SECONDS TIMER" are the text

layers whose content is replaced by the countdown values. No other

layer in the banner is affected — in particular, do not touch the

"HOURS", "MINUTES" and "SECONDS" label layers.

- Do not change the position, size, colour, font or styling of these

layers — only their text content.

TIME LOGIC

- Read the current time from the viewer's device, in their local

timezone.

- The target is 17:00:00 on the current day.

- Remaining time = 17:00:00 today minus the current time.

- At 00:00:00 the remaining time is exactly 17 hours, so the countdown

starts at 17 : 00 : 00 and decreases from there.

- Worked examples, to confirm the direction of the count:

- at 00:00:00 it shows 17 : 00 : 00

- at 08:30:00 it shows 08 : 30 : 00

- at 16:59:45 it shows 00 : 00 : 15

- at 17:00:00 it shows 00 : 00 : 00

- The countdown never counts up and never shows a negative value.

- From 17:00:00 until 23:59:59 it stops: it holds at 00 : 00 : 00 and

does not tick.

- At 00:00:00 it resets automatically to 17 : 00 : 00 and starts

counting down again, without requiring a page reload.

DISPLAY

- "HOURS TIMER" shows the remaining whole hours.

- "MINUTES TIMER" shows the remaining whole minutes within the current

hour.

- "SECONDS TIMER" shows the remaining whole seconds within the current

minute.

- Always pad each value to two digits, so 9 displays as "09".

- Update every second, on the second.

- Values change instantly with no animation, fade or slide.

SIZING

- All positions and sizes are relative to the banner, with no fixed

pixel dimensions, so the countdown works at any format.

CARD CAROUSEL

SETUP

- "Card 1", "Card 2" and "Card 3" are the three slides. Each contains

its own "Image", "Book CTA", "Destination" and "Card" layers, which

always move together as one unit.

- All three cards are the same size and sit in a horizontal row, evenly

spaced, with a gap between neighbouring cards equal to 8% of the

banner width.

- One card is centred in the banner at any time. The cards on either

side of it sit partly outside the banner edges and are visible as

narrow peeks, so the user can see there is more to browse.

- "Card 1" is centred on load.

- "Arrow Left", "Arrow Right", "Spur Logo", "Summer starts at the

gate", "On time, more often than not", "Legal Text" and "Background

Image" are never animated by the carousel and stay fully visible at

all times.

CARD STATES

- The centred card renders at 100% scale and 100% opacity, with a soft

drop shadow: 0px 12px 32px, black at 25%.

- The peeking cards on either side render at 88% scale and 55%

opacity, with no shadow.

- Scale and opacity animate smoothly and continuously alongside the

slide, so a card grows and brightens as it moves toward centre and

shrinks and dims as it moves away — never a hard switch between

states.

NAVIGATION

- Clicking or tapping "Arrow Right" advances to the next card:

Card 1 → Card 2 → Card 3 → Card 1.

- Clicking or tapping "Arrow Left" goes to the previous card:

Card 1 → Card 3 → Card 2 → Card 1.

- The loop is endless in both directions — there is no first or last

card. Cards wrap around, so the card leaving one edge reappears as

the peek on the opposite edge and the row of three never runs out.

- The arrows are never disabled or greyed out.

- Clicking or tapping a peeking card brings it to centre, in the same

direction it sits.

TRANSITION

- The whole row shifts sideways by one card width plus the gap, so the

next card lands centred and the peeks update.

- Duration 500ms, ease-out with a slight overshoot: the row travels

about 3% past its target and settles back.

- Position, scale and opacity animate together. Do not rotate or blur

the cards.

- Clip the row to the banner so nothing is visible outside the banner

edges.

- Ignore further arrow clicks while a transition is running, so rapid

clicking cannot desync or stack the animation. Accept input again as

soon as it finishes.

ARROW STATES

- On mouse hover, scale the hovered arrow to 115% over 150ms, ease-out,

and nudge it 3px in the direction it points. Return to 100% and

original position on leave.

- Both arrows stay at full opacity at all times.

IDLE HINT

- If there is no interaction 3s after load, slide the row 4% of a card

width to the left and back over 900ms, ease-in-out, so the right peek

briefly grows — hinting that the cards move. Loop with a 2.5s pause.

- Stop the hint permanently on first interaction.

SIZING

- All positions and sizes are relative to the banner, with no fixed

pixel dimensions, so the carousel works at any format.

MOBILE

- Arrows respond to tap identically to click.

- Also support horizontal swipe on the card area: swipe left advances,

swipe right goes back, matching the arrow behaviour.

- Prevent page scroll while a horizontal swipe is in progress.