Careers Website Design

A Careers Page Told Through Eight Scenes

This Kimi careers reconstruction is not a long page whose sections simply pass through the viewport. It layers eight scenes in one visual stage and uses scroll progress to change their opacity, position, scale, and blur. The effect is closer to moving between frames of a presentation than reading a conventional job-listing page.

That distinction explains both its visual appeal and its limitations as a careers website design. The sequence can establish a strong atmosphere, but practical information must remain available outside the transitions. A visitor who wants the application process has a different task from someone exploring the brand story.

How Scroll Position Becomes a Scene Transition

The source maps the page’s scrollable travel onto positions from 0 to 7, one for each of the eight scenes. A scene becomes the current one when it is nearest to that position. Neighboring scenes can remain partly visible during the handoff; this is why a screenshot taken between stops can look soft or doubled.

Four Numbered Stops on an Orbital Application Path

The application scene translates a sequence into a lunar route. Stop 1, marked with a computer and Submit, appears near the lower middle; stop 2 is to its left, and stops 3 and 4 continue across the upper part of the orbit. The numbers carry the reading order because the geometry is not a familiar left-to-right timeline.

01

The Path Connects, but the Numbers Sequence

An orbital line explains that the four stops belong together. It does not by itself say where to begin or which direction to follow. The oversized number badges supply that missing order. The same distinction matters in a winding onboarding flow or illustrated process diagram.

02

The Illustration Is Not the Full Instruction

The scene names an application process, but the supplied reconstruction renders it as an image. A working page would still need the actual step names, requirements, and destinations as text. Those details should remain readable when the diagram stacks vertically on a phone.

Where a Visual Reconstruction Needs Real HTML

OpenDesign made this as an official hackathon example and visual study, not a commissioned Moonshot project. The distinction is visible in the implementation: scenes 2–8 are supplied reference images, and those images are marked aria-hidden. Changing which scene is current does not make the labels inside an image accessible as text.

1. Keep Headings Outside the Background Image

   In a working version, a scene’s title and explanation should remain selectable text. A background can carry the cockpit, stars, or moon; it should not be the only location of an application instruction.

2. Separate Motion From Access to Information

   Provide a settled, readable layout when motion is reduced, and a direct route to the process. This is a proposed improvement, not a feature verified in the supplied reconstruction. A visitor should not have to master the scroll animation to find the next step.

What This Careers Website Design Demonstrates

This case demonstrates scene composition and scroll-linked motion, not current vacancies or a working application backend. Its deliberately pixelated reference artwork is not vector artwork, and native-resolution export does not remove that stylistic limit. Use it to study the narrative and transition mechanics; use the employer’s official channels for actual hiring information.