# Editorial One Page Template > A vertical-agnostic editorial one-pager whose cover exists twice: a chalk plate on top and an ink negative beneath it, revealed through a soft aperture that follows the cursor and stretches on the axis it is moving along. Canonical: https://gsapvault.com/templates/editorial-one-page-template Live demo: https://gsapvault.com/demos/editorial-one-page-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £10 | | Difficulty | intermediate | | Plugins | ScrollTrigger, SplitText | | Techniques | mask-reveal, mouse-follow, scrub, text-animation, scroll-reveal, stagger | | Uses Lenis | Yes | ## Overview A complete one-page site that takes its identity from print discipline rather than from a business type. The fictional occupant is Margin, an independent creative practice in Leeds, but nothing about the structure is tied to that: a strict column grid, hairline rules, marginalia set in the outer column, a drop cap, a ruled ledger of figures and two large pull quotes will carry a studio, a practice, a personal site, a product or a manifesto without being restyled. The signature is the cover. The composition exists twice in the markup: the chalk-ground version in normal flow, and beneath it a full-bleed ink "negative" of the same thing, chalk type on ink with the artwork inverted. A soft circular aperture follows the cursor and reveals the negative through it, and the aperture is layered rather than literal: its radius eases behind the pointer, it stretches along the axis you are moving on and squashes across it, a one-pixel accent rim trails a little behind, and when the pointer settles it springs back to a circle. It reads like a plate being inspected under a moving light. On a touch screen the aperture drifts on a slow orbit of its own and springs to wherever you tap, and a real button opens it to full bleed on any device, which is also the keyboard route. The second moment is quieter and just as useful: as the cover leaves, a scrubbed ScrollTrigger walks the large cover wordmark into the fixed top bar's own wordmark slot, measured live from the two elements so it lands exactly whatever the type size or viewport, then hands over invisibly. Everything else is disciplined. Two typefaces, one ground, one accent, and three colour values that reskin the whole page. Replace the copy, the four designed plates (all CSS and inline SVG, so there are no images to license or optimise), the five ledger figures and the two quotes, point the contact links at your own inbox, and deploy the folder as static files. There is no build step. ## Features - Complete deployable one-page site: fixed bar, full-viewport editorial cover, lede with drop cap and marginalia, four designed plates, a ruled ledger, two pull quotes and a colophon with contact details - The torch cover: an ink negative of the whole composition masked to a soft aperture that follows the cursor, stretches on the axis of fast movement, trails a 1px accent rim and springs back to a circle when the pointer settles, all written from a single ticker pass - A docking wordmark: the large cover wordmark is walked into the fixed bar's slot on a scrubbed ScrollTrigger, measured live so it lands on the slot to the pixel, then hands over to the bar's own mark invisibly - A real coarse-pointer answer rather than a disabled one: the aperture drifts on its own slow orbit, springs to a tapped point with an elastic settle and resumes the drift without a jump, plus a "Reveal the plate" button that opens it to full bleed from the keyboard, on any device, and still works under reduced motion - Four plates of designed artwork with captions set in the margin: a chalk-on-ink halftone field, an eighteen-pass plotted contour in inline SVG, a typographic monogram and a registration study. No photography, no image files, nothing to license or optimise - Print-set detail throughout: masked headline lines, a drawn signature, a hairline-ruled ledger whose rules draw from the left row by row, and pull quotes split into lines with SplitText after the real faces have loaded - Three colour values with RGB triples and a measured contrast table in the stylesheet header, including which surfaces the accent is banned from and why; a reskin is a three-value edit. Prata and Lexend only, two faces doing five jobs - Degrades completely and cleans up after itself: with JavaScript off the cover is the plain chalk plate and every section reads in full, reduced motion is honoured in both CSS and matchMedia, every section's selectors are guarded so any of them can be deleted, and Lenis is wired onto the GSAP ticker and entirely optional ## Use Cases - Design studios and creative practices that want a type-led site with one memorable interaction - Independent consultants, architects and writers with a personal site where the work is mostly words - Product or manifesto pages where a single strong idea has to be stated and defended - Small practices publishing real figures, with a ledger section that reads like a printed statement rather than a stat grid - Any vertical that needs an editorial identity without commissioning photography, since all four plates are CSS and inline SVG - Learning masked reveals and pointer-driven masking: a working example of driving mask-size and mask-position from eased state on one rAF pass ## How It Works ### Structure One script initialises the whole page inside a single gsap.context, with a gsap.matchMedia set keyed on reduced motion and pointer type so every device lands in exactly one branch. Every querySelector is guarded, so any section can be deleted and the rest keeps working. All reveal start states are double-gated behind a has-js class added synchronously in the head and a motion media query, so a blocked CDN and a reduced-motion preference both leave the complete static page. ### The torch aperture The negative plate carries a static radial-gradient mask; the script only ever writes mask-size and mask-position, because a custom property inside a gradient string cannot be tweened. Pointer position, radius and the two stretch factors live on one state object eased by gsap.quickTo, and a single gsap.ticker callback turns that object into the mask box and the rim's transform. The stretch comes from pointer velocity, biased toward whichever axis is moving faster and squashed on the other; the settle is an elastic tween back to a circle, fired when the pointer has been still for a tenth of a second. ### The docking wordmark A scrubbed ScrollTrigger runs from the top of the cover for just over half its height. Its x, y and scale are functions that measure the cover wordmark and the bar's wordmark live, so the tween's end state is wherever the slot actually is; the y value also cancels the scroll the page has done over the range, which is why the ease has to be none. At the end of the range the cover wordmark is switched off and the bar's own wordmark switched on in the same frame, at the same size and position, so the handover is invisible. ### Accessibility and reduced motion Under reduced motion nothing moves: the page is the plain chalk plate with every line set, Lenis is never created, and the aperture is not animated at all - but the reveal button still works, snapping the plate open through a CSS class. On a coarse pointer the aperture drifts autonomously and answers taps, so a phone visitor sees the same idea. The button is a real button with aria-pressed and a changing label, focusing it opens the aperture in the middle of the plate, and every interactive element has a visible focus ring. ### Without JavaScript There are no JS-built elements. The negative plate and the reveal control are both gated behind the has-js class, so with scripting off the cover is simply the chalk composition with its headline set, the wordmark sits in the bar as well as on the cover, and every section below reads top to bottom in full. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start 1. Copy the whole folder to your web server or any static host. There is no build step. 2. In `index.html`, replace the wordmark in **two** places: `.bar-mark` in the fixed bar and `.cover-mark` on the cover. They have to match, because one docks into the other. 3. Replace the cover copy. The headline is three hand-broken lines, and it appears **twice** (once in `.plate--chalk`, once in `.plate--negative`) so the negative stays in register. Edit both, or see "Deleting the torch" below. 4. Replace the rest: the lede standfirst and its two marginal notes, the four plate captions, the five ledger rows, the two quotes, and the colophon details. 5. Point the contact links at your own inbox: the `mailto:` on `.mailto`, the `tel:` in the details list, and the three placeholder social links (they currently point back at `#colophon`). 6. Deploy. The page works with JavaScript disabled, so nothing else is required. The GSAP scripts load from a CDN in `index.html`. Swap `assets/script.js` for `assets/script.min.js` in production if you prefer the smaller file. ### Accessibility - **Reduced motion** is honoured twice, in a CSS `prefers-reduced-motion` block and in a `gsap.matchMedia` branch. Nothing moves, nothing is hidden, Lenis is never created, and a preference changed mid-visit restores the static page. The reveal button still works: it snaps the plate open through a CSS class instead of easing it. - **Touch and coarse pointers** get a real version of the signature, not a disabled one: the aperture drifts on its own path and springs to a tapped point. - **Keyboard**: the reveal control is a real `