---
schema_version: 1
id: "rhythm-planner"
name: "Rhythm Planner"
summary: "Oversized time numerals and proportional task bars form an editable three-task local day plan with exact midnight-aware exports."
family: "functional"
tags: ["task-led", "precise", "typographic-motion"]
best_for: ["products", "personal"]
avoid_for: ["data"]
density: "balanced"
image_dependency: "low"
motion_level: "expressive"
complexity: "medium"
signature: {"composition": "A clock-led proposition before an editor; B narrow task worksheet beside immediate temporal output.", "typography": "Oversized tabular Arial digits with readable practical labels.", "navigation": "Editor/result/principle anchors and real A/B siblings.", "content_rhythm": "Product-to-demonstration versus editor-to-immediate-plan.", "imagery": "Original HTML time digits and proportional duration marks.", "color_and_material": "Cobalt, pale lavender, warm white and near-black result text.", "interaction": "Three tasks, break choice, reorder, validation and actual JSON/TXT export.", "motion": "650ms alignment, 500ms expansion, 250ms reorder and 280ms break gaps."}
status: "ready"
prompt_path: "prompts/rhythm-planner/prompt.en.md"
---

# Rhythm Planner

## Intent

Rhythm Planner turns an ordinary day into a visible sequence rather than a dense productivity dashboard. The fictional Lithuanian Cadenly product presents three actual editable tasks, their start time and the space between them. Visitors can understand the proposition, calculate a plan and retain it as a real local file. Nothing promises measured productivity or submits information to a service. The page begins with an explicit planning metaphor: large time digits align with three bars whose different lengths suggest distinct periods of attention.

## Signature

Preserve five invariants: oversized tabular time numerals; three proportional duration marks; explicit readable start and end labels; cobalt with pale lavender and warm white; and input-driven changes that settle. A introduces the product through a wide typographic clock before a complete demonstration. B begins with a practical working proposition and places the editable list beside the time composition and resulting sequence. The marks always describe durations rather than unrelated decorative statistics.

## Typography

Arial supplies direct display and practical type through system fallbacks, without a font download. Large digits have tight spacing and tabular numerals. Headlines wrap into deliberate short lines; body text retains a comfortable reading measure. Captions and input labels remain large enough to explain the task without competing with the numerical composition. Real Lithuanian names, validation messages and the complete colophon exercise accented glyphs. Phone layouts reduce scale before shrinking practical labels.

## Color and surfaces

Deep cobalt establishes the page. Pale lavender forms the accent surface and result sheet, where near-black text carries exact times. Warm white supports essential copy on blue; muted lavender remains readable on the supporting blue surface. The focus ring is yellow on cobalt and dark on the pale sheet. Semantic generated tokens own these interface relationships. Solid marks avoid uncertain text-on-gradient contrast and emphasize reliable length comparisons.

## Layout A

A pairs the product promise with a large clock and three unequal horizontal bars. An actual anchor reaches the working demonstration. Below, a full conditions sheet and editable three-row list sit beside a substantial pale result. A final split explains the local-data boundary, rhythm principle and native questions. The sequence moves from visual proposition to actual use and then practical reassurance. It avoids fabricated testimonials, account creation and unavailable integrations.

## Layout B

B opens with a shorter workbench introduction. A narrow complete task editor appears beside the clock, bars and resulting timeline. The editor keeps all three task names and durations visible while the right column makes consequences immediate. This working relationship is substantially different from A’s broad marketing-first hero and lower demonstration. On phones the editor precedes the compact clock and complete output, preserving the order of action and consequence.

## Imagery

Original HTML geometry and letterforms provide all imagery. The hero clock is a typographic object, not a screenshot or running device clock. Result bars use each duration divided by the whole plan, including breaks, so their lengths remain on one meaningful scale. No external photographs, icons, models, recordings or font binaries are bundled. An empty asset registry is intentional because the code-native marks are authored inside the reference implementation.

## Navigation and interaction

Ordinary links reach the editor, result or explanatory section and the real sibling composition. Native labels identify start time, break choice, task names and whole-minute durations. Up/down buttons reorder actual rows while retaining keyboard focus and recomputing every time. Invalid data clears the stale result and disables both exports. Real JSON and UTF-8 TXT files contain the current ordered plan. No storage, network transmission or successful server action is implied.

## Motion

On opening, digits and hero bars align over 650 milliseconds. Calculation expands duration marks over 500 milliseconds. Reordering uses a 250-millisecond positional transition, while break changes expand the actual gaps over 280 milliseconds. Textual times update once per calculation. The finite runtime exposes pause, visibility suspension, reduced immediate states and pagehide disposal. There is no autonomous ticking or endless counter. Canonical screenshots show the settled informative composition.

## Responsive behavior

Desktop A gives the typographic clock and promise similar visual weight; B uses a narrower worksheet and wider temporal output. Tablet gaps and type contract before the columns stack. At 390 and 360 pixels the name field keeps flexible width, duration remains a compact labeled control, and reordering buttons occupy their own line. Result text wraps safely even for long names. No horizontal gesture or fixed overlay is required to edit or download.

## Accessibility

One main landmark, one h1, a skip link and visible focus establish the reading route. Form labels are explicit and error messages use a native alert region. Result times and names remain ordinary text rather than image labels. Live status explains recalculation and download preparation. Disabled controls do not imply available exports when validation fails. Browser evidence supplements direct keyboard, four-width, invalid-input and exported-content checks; these bounded gates do not constitute a universal accessibility certification.

## Adaptation

Replace the fictional product name, examples and supporting explanation with verified project content. Preserve the task-to-duration relationship and use integer elapsed minutes as the calculation source. A production planner can extend the number of tasks, but must define its maximum duration, day boundary and storage policy explicitly. Move the same semantic fields and output sequence into an existing framework without adopting this repository’s build system. Keep any backend promise outside the local demonstration unless it really exists.

## Avoid

Exactly three deviations break this direction: decorative bars that disagree with entered durations; a ticking clock or endless numerical animation that competes with editing; and a stale or overlapping exported plan after input changes. The final task receives no trailing break. Dates beyond midnight must carry a readable next-day marker rather than silently returning to an earlier-looking time.

## Closest styles

Data Observatory uses a simulated dataset, synchronized metric summaries and a searchable comparison table; Rhythm Planner creates an ordered temporal sequence from visitor input and exports it. Composition, navigation and content rhythm differ: typographic clock and working editor replace metric cards and dataset comparison. Kinetic Type uses campaign words, date-led sessions and day filters. Here exact start/end arithmetic, proportional task marks and a persistent editable list replace word posters, curated programmes and campaign-day navigation. Actual ready previews are compared at corresponding desktop and phone sizes.