Cheongram Optics — Precision Optics & Observatory Site
Cheongram Optics is a corporate site demo for a fictional precision-optics company that grinds large telescope mirrors, builds spectrographs, and runs observatory control. The site turns complex observatory infrastructure into a clear corporate narrative through bold typography, measured motion, and structured information architecture. The company, figures, and imagery are all fictional.
The brief
Unfamiliar optics vocabulary — re-polishing, collimation, light pollution — had to read with the clarity and plausibility of a real company's service language. The challenge was to explain the technical work, establish trust, and preserve immersion while making the fictional nature of the project explicit.
Design approach
A night-sky navy and observatory green palette carries extreme weight contrasts of the Pretendard variable typeface. The hero slowly pans across a dome-slit ridge at night with a Ken Burns move; in the following pinned scroll section the CHEONGRAM / OPTICS wordmark wipes open through clip masks while an inline photo slot widens between the words. Every image is AI-generated, with a footer note that no real people or places are depicted.
Key interactions
- Full-screen hero with play/pause — a 100dvh hero with a playback control and a right-edge quick-link aside; the transparent header turns solid on scroll.
- Pinned scroll wordmark — on a scrubbed timeline the two-line wordmark reveals in sequence as the inline photo expands from 0 to 142px wide.
- Hover-expanding business cards — the field-optics and lab cards grow by flex ratio on hover, revealing tag links to sub-pages.
- Network parallax and counters — above the night earth, 6 primary and 11 partner observatories count up, and an uppercase marquee closes the section.
- Height-matched careers board — a poster-and-strip column, a knowledge/benefits card column, and a tall join card carrying the open-roles list all align to the same height with different compositions. Each card gets a circular arrow and a lift on hover.
- Section remote and mobile GNB — a pill remote at the bottom tracks the current section, switching to a full-screen accordion menu on mobile.
Tech, performance, accessibility
- Next.js 16 static export — built with the App Router static export and deployed to Cloudflare Pages; _headers applies security headers and immutable caching for static assets.
- GSAP + Lenis — ScrollTrigger drives pins, scrubs, and reveals while Lenis smooths scrolling; under prefers-reduced-motion, pins and autoplay are skipped.
- Image pipeline — everything ships as WebP with explicit width and height on every img, eliminating layout shift.
- Accessibility — skip link, aria labels, visible focus rings, and a keyboard-operable mega dropdown.
Live demo: ononc-cheongram-optics.pages.dev
