Build “Little Octo,” a polished, interactive single-page website that gives visitors small moments of encouragement.

VISUAL DESIGN

Use a clean pastel underwater theme: soft aqua, lavender, blush pink, and cream. Place a cute, expressive octopus mascot in the centre, with rounded tentacles, rosy cheeks, and gentle idle movement. Add subtle water ripples, drifting bubbles, and soft light rays. Keep the background calm and the text easy to read.

Above the mascot, show “A little kindness from the deep.”

Below it, show “Tap Octo for a little encouragement.”

MAIN INTERACTION

When the visitor clicks or taps the octopus:

1. Octo reacts with a delighted expression.
2. One tentacle reaches into a small seashell pouch and retrieves a folded note.
3. Octo unfolds and presents the note with a soft bounce.
4. The note becomes a translucent floating bubble containing the affirmation.

Previous notes remain visible and drift slowly around the octopus. Keep bubbles inside the viewport and away from the mascot’s clickable area. Let visitors dismiss individual bubbles. Keep up to eight visible; gently fade out the oldest when adding another.

Add a three-second cooldown starting immediately after each accepted click. Show a subtle progress ring and “Finding your next little note…” during the cooldown. Ignore additional clicks until it finishes.

SECRET NOTES

Each accepted click has an independent 10% chance of revealing a secret note. Give it a longer celebration: Octo twirls, its tentacles wiggle, and pastel stars and bubbles appear. Present the note in a pearl-like bubble with a gentle shimmer and a small “A rare little treasure” label. Keep its text visible after the animation.

CONTENT

Include at least 40 original everyday affirmations and 10 secret notes. Avoid repeating a note until its category’s collection has been used.

Everyday examples: “You can take this one small step at a time.”

“Rest is part of growing.”

“You don’t have to earn a gentle moment.”

Secret example: “Somewhere in this enormous ocean, there is room for exactly who you are.”

IMPLEMENTATION AND QUALITY

Create a responsive static website with smooth SVG or CSS mascot animations. Support mouse, touch, and keyboard activation. Provide visible keyboard focus, readable contrast, and screen-reader announcements for new notes. Respect reduced-motion settings by replacing movement with gentle fades.

Test cooldown enforcement, rare-note selection, bubble dismissal, and mobile layouts. Avoid horizontal scrolling and overlapping unreadable notes.

Deliver working source code, setup instructions, and a static build. Publish the website if the selected job’s hosting options support it.