Psychology · Light

Hillside

A landscape of green hills built in layers, from which the session's video windows emerge from behind the hillside and turn, in frosted glass, into the app's own interface.

Palette

--sky-top#9BCDEC
hero sky, top of the gradient
--sky-dusk#B2B6DB
lilac sky at the end of the page
--sky-warm#E7C9B4
horizon peach in the final CTA
--hill#6E9E2E
green of the hills (illustrated/photographic layers)
--bg#F1F0EC
warm off-white of the content sections
--ink#161616
serif titles and main button
--ink-2#5E6266
supporting text
--line#DCDAD4
thin borders of cards and fields

Typography

Display: slightly condensed transitional serif, regular weight (400), normal case, tracking -0.02em, line-height 1.0; clamp(40px, 5.2vw, 76px), titles always on two lines — suggestions: Newsreader / Instrument Serif.
Body: neutral humanist grotesque 13–15px, weight 400, gray — suggestions: Inter / Geist.
Support/labels: same grotesque at 10–11px for glass pill tags ("next session", name + specialty), selection chips and footer links.
Treatments: giant serif wordmark in the footer "planted" behind the hillside (base of the letters hidden by the hill); hero title that is born from behind the hill via a mask.

Sections

Intro (load) — empty blue sky; layers of bluish mountains, then green hills, rise from below; the serif title emerges from behind the hill; two video-call cards rise from behind the hillside.
Nav — logo (hill icon + serif name) on the left; 5 small centered links; "Sign in" (white pill) and main (black pill with an arrow) buttons on the right.
Hero — 2-line title and paragraph on the left, two pill buttons; on the right, two overlapping video cards (large portrait of the therapist + smaller one of the patient) pinned behind the hill, with a glass label "next session" above; caption of specialties in white over the grass, at the base.
From video to app — on scroll, the cards rise, the hill descends and the main card grows inside a frosted-glass panel with a green→beige→amber gradient; the panel becomes the app window (top bar with logo, 3-step stepper, avatar).
Onboarding — inside the panel, a chip form (reason, practitioner preference) with a progress bar and a "continue" button.
Specialties — 2-line title + note on the right; 2×3 grid of cards with misty landscapes, serif title in the top-left corner and a short description.
Practitioners — 2-line title; 4 portrait cards with a landscape background and a glass label at the base (name, approach, topics).
Pricing — over a blue→lilac sky gradient, a glass card with two prices (single session and package) and buttons.
Final CTA + footer — 2-line title and two buttons over a peach/lilac sky; glass footer over the hillside with links, contact and a giant serif wordmark emerging from the hill.

Motion and interaction

Landscape assembly: load → 4–5 layers (sky, distant mountains, near mountains, rear hillside, front hillside) rise from yPercent 40 to 0 with a 120ms stagger, 1.4s expo.out; title appears via a mask behind the front hillside.
Cards emerging from the hill: load and scroll → the video cards sit on a layer between the rear and front hillside, rising from y 60% to 0 (1.2s, power3.out, delay 0.6s).
Layer parallax: scroll scrub → each layer moves at a different speed (mountains 0.15, rear hillside 0.35, front hillside 0.6), creating depth.
Video becomes app: scroll with pin (GSAP ScrollTrigger + Flip or manual interpolation) → main card scales and repositions inside the glass panel; the smaller card shrinks into a 32px circular avatar; the app frame (bar, stepper) fades in over 400ms.
Frosted glass: CSS backdrop-filter blur(24px) saturate(1.3) with a 1px white border at 60%.
Sky gradient: scroll → page background interpolates from blue to lilac and peach in the final sections.
Card hover: landscape image scales 1→1.04 over 600ms; glass label rises 4px.
Reveals: serif titles with fade + y 20px, 800ms ease-out.

Components

Primary button: black #161616 pill, white 12px text, "→" arrow on the right, 36px height.
Secondary button: white pill with a #DCDAD4 border and a mini circular avatar on the right.
Glass tag: 10px pill with backdrop-blur and 55% white background.
Video card: 4:5 portrait, 10px radius, name/specialty tag in the top-left corner.
App panel: large frosted glass, 20px radius, top bar with a stepper of 3 numbered dots.
Selection chip: white 11px pill, active state black.
Specialty card: 16:10 landscape, 22px serif title at the top, 11px description, 12px radius.
Practitioner card: portrait with a landscape behind, glass tag at the base with a bold 12px name and 2 gray lines.
Glass price card: two side-by-side blocks with a large serif value and a superscript "R$".