What it is
An architecture studio's site, complete: a full-height hero, an intro, services in tabs, client logos, projects on a horizontal rail, a review carousel, articles, an FAQ and a footer. One page, one HTML file.
The design follows that of a Webflow template, of which only the photos and the icons have been kept. All the code has been rewritten: the original came to 129 kB of minified CSS, jQuery, four Webflow bundles totalling 400 kB, a proprietary animation engine (IX2) and three GSAP files loaded from two domains — whose calling code is nowhere to be found in the export.
That's the whole point: this template isn't here to be admired, it's here to be read, broken and rebuilt.
What you change first
The colours — five lines
Right at the top of assets/css/style.css:
--green: #506e61; /* buttons, section pills */
--green-dark: #3f574d; /* the same green, darkened for hover */
--green-light: #8fb0a1; /* the same green, lightened: focus and text over photos */
--paper-grey: #f5f5f5; /* the background of alternating sections */
--bark: #2f2c25; /* the headings on project cards */One thing to grasp before touching anything else: there are three greens, not one. The solid green passes AA contrast on white and on the section grey (5.6:1 and 5.1:1), but it vanishes into a photo. That's why the focus ring and the states over photos use the lightened version (6.0:1 on a dark photo). If you change the green, change all three.
The name
Search for “Shirune” in index.html. No CSS class carries the brand name: a find-and-replace can't break anything.
The sizes
The type scale is declared once, then redeclared at every breakpoint. So a heading never gets its own media query: you change --h2 and the whole page follows.
The fifteen effects, and how they're built
All taken from the data of the original's animation engine — 97 events and 24 action lists pulled out of its store, then measured in the browser, not by eye. After deduplication 35 distinct events remain, grouped here into fifteen effects.
| Effect | Original settings | How |
|---|---|---|
| Scroll reveal (22 blocks) | opacity 0→1 and 100 px bottom to top, 1 s, outQuart | IntersectionObserver, same values, firing 15% up from the bottom of the screen |
| Navigation bar entrance | −100 px from the top, 1 s outQuart, 200 ms delay | the same in CSS, under html.js |
| Navigation bar scrim | from 0 to 9% of the scroll: background transparent → 60% black, pill 20% black → 34% white | a --veil variable written on scroll, color-mix for the pill |
| Navigation bar that hides | −100% going down, 0 coming back up, 500 ms inOutQuad | a class set on scroll, with an 8 px dead zone |
| Hero parallax | the content drops by 50% over one screen of scrolling | same run, worked out on scroll |
| Project rail | section pinned over 5 screens, the cards slide 1,700 px | scrollLeft driven by the progress, the run measured rather than hard-coded |
| Buttons (6) | two labels rising 20 px, arrow +10 px, 400 ms inOutQuad | two labels stacked in a clipping box, same durations |
| Project cards (7) | the photo scales to 1.2×, 500 ms inOutCubic | un transform, same values |
| Hero card arrow | two arrows translated by 22 px, 300 ms | two <use> in a clipping box |
| Article cards (2) | the photo scales to 1.2×, 500 ms inOutCubic | same |
| FAQ accordion (5) | height 0 ↔ auto in 500 ms, the “+” turns 45° | <details> native, transition on ::details-content |
| Service tabs (3) | Webflow panels, a dot appears on the active tab | three native radio buttons and :has() — zero JavaScript |
| Mobile menu | the panel comes in from the right, 800 ms inOutCubic | same translation, plus the focus trap and the Escape key |
| Review carousel (4) | Webflow slider, 500 ms slide | scroll-snap native; the arrows become buttons |
| Text that lights up | GSAP SplitText — the code isn't in the export, only the resting state can be observed | reconstructed: the words light up one by one as you scroll |
What you should know
- No external requests. 43 requests on load, all of them local. The original loaded jQuery, four Webflow bundles, three GSAP files and two font families from four domains.
-
Scroll reveals can't hide the content.
The hidden state only exists once the JavaScript has run. Checked by removing the
<script>: 21 headings out of 23 stay visible, the last two being the unselected tab panels — which the CSS hides, and a click brings back. The original, meanwhile, setstyle="opacity:0"on each of the 22 animated blocks. -
Zero inline styles, zero inline scripts. The template honours the site's strict security policy — the very one that
style="opacity:0"breaks. - The trigger sits 15% up from the bottom of the screen, not at the first pixel as in the original: a block visibly enters instead of having finished before it was seen.
- The project rail works without JavaScript. It's a real horizontal scroll container: you can swipe it and reach it from the keyboard. Driving it from the vertical scroll comes on top of that.
- Accessibility: skip link, menu state announced, native FAQ, carousel position announced, a single visible focus style, decorations hidden from screen readers, animations and delays switched off if the system asks.
- Responsive checked at 390, 1440 and 2560 px, on load and after scrolling all the way down, with no horizontal overflow.
What isn't perfect
Better said here than left for you to find out.
- The text that lights up is a reconstruction. The original loads GSAP and SplitText but the code driving them appears nowhere in the export: only the resting state can be observed, words in pale grey. The effect was rebuilt from that.
- The project rail doesn't slide the same distance. The original translates by 1,700 px whatever the width, which leaves a gap on the right on a large screen. Here the run is measured, so the last card arrives exactly at the edge. Beyond 2,550 px all six cards fit side by side: the section stops being pinned rather than holding the page for five screens.
- The grey of the text that lights up has been darkened. The original's falls to 2.6:1 on the section background — unreadable for anyone not scrolling the page. Ours is at 4.6:1 and the effect is still visible.
- Three sections differ by more than 1% below 992 px: the hero (+5.2% at 767 px, −2.4% at 479 px), the reviews (−4.0% at 479 px) and the footer (+2.6% at 479 px). All of it comes from where the copy wraps as the column narrows. Nothing overlaps.
- The inner pages don't exist. The original is a multi-page site; all its links are brought back to anchors on the single page, and the contact button opens the mail client.
- The photos come from the original template and several are generated images — their file names say so. The code is yours; for the visuals, check the licence or replace them. The three fonts are under the SIL Open Font Licence 1.1 and are redistributable.
Take it, open it, break it.
Shirune Studio is free. The full library — the other templates and the components — comes with the subscription, alongside the course.
Immediate access · No commitment · Cancel in one click