Heroes
Ten landing-page hero treatments from @idinstudio/ui — every one shown full-bleed, exactly as it renders on a real page.
Every hero below is scroll-revealed (stagger, fade, parallax, or a scroll-cue affordance) and all of it degrades to a static, fully-visible layout under `prefers-reduced-motion`. The reveal and parallax drift are best felt by scrolling this page slowly rather than reading a screenshot.
HeroCentered
Big editorial centered hero: display headline with a gradient-accented closing phrase, staggered reveal, floating scroll cue.
We design and ship products that actually feel finished.
From first sketch to production release, one team owns the whole build — no handoff, no drift between design and code.
HeroSplit
Asymmetric 60/40 split: copy on one side, a parallax-drifting media panel on the other. `reverse` swaps sides; the primary CTA gets the Magnetic pointer-pull.
A booking flow that converts twice as fast.
We replaced a four-step wizard with a single adaptive form — and cut drop-off in half within the first release.
HeroGradient
Full-bleed token-driven gradient/mesh hero with drifting blurred blobs and a frosted-glass CTA card. Pins dark mode so ink stays legible against the wash.
HeroImage
Full-bleed photographic hero with a bottom-anchored gradient scrim so copy stays legible over any photo. Shown at 60vh here for the gallery — defaults to 100vh.
Interiors that hold their shape for decades.
We design and build residential and hospitality interiors across the Nordics — from the first sketch to the last hinge.
HeroVideo
Full-bleed looping background video with a symmetric vignette. Renders the required `poster` instead of mounting the video at all under prefers-reduced-motion. Shown at 60vh here — defaults to 100vh.
HeroAnimatedText
Kinetic headline hero. `mode=“rotate”` cycles a single trailing word through `words`; the default `“reveal”` mode staggers the whole title in word-by-word instead.
Halcyon Studio designs interiors that feel timeless.
Residential and hospitality projects across the Nordics, from the first sketch to the last hinge.
HeroMarquee
Centered headline over a full-bleed looping band of services, keywords, or logos beneath it — texture and range without competing for attention.
One studio. Every discipline your project needs.
Halcyon Studio pairs interior architecture with the brand, furniture, and lighting work most projects have to outsource.
HeroStats
Headline paired with a rule-divided ledger of count-up metrics — an editorial fact sheet, not a dashboard card grid.
Numbers that back the story.
A snapshot of what teams hit after their first quarter on idinstudio.
HeroMinimal
Editorial, restraint-first hero: one enormous headline, a tiny meta byline, a single quiet action, a scroll cue. Negative space carries the composition.
We build the tools your team forgot it needed.
Est. 2019
Zurich
HeroProduct
Product-screenshot hero: copy + feature bullets beside a parallax-and-pointer-tilt product frame with a soft gradient glow behind it.
Ship your next release with confidence.
Automated changelogs, staged rollouts, and one-click rollback — built for teams that can't afford a bad Tuesday deploy.
- One-click rollback to any previous release
- Staged rollout with automatic health checks
- Changelogs generated from your commit history
