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 goal was to transplant the IA, typography, and motion language of HD Hyundai Marine Solution Tech from marine engineering into observatory infrastructure — and to prove the same design system keeps working in a different industry. The company, figures, and imagery are all fictional.
The brief
We needed to verify that the reference site's motion and information architecture still hold when the content moves from the ocean to the night sky. Unfamiliar optics vocabulary — re-polishing, collimation, light pollution — had to sit as plausibly as a real company's, while clear fictional disclaimers preserved honesty without breaking immersion.
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
