Alex Marlow

Design Engineer

Helsinki, FI

00:00:00 EET

Instructions

[Getting started]

Lately is built so you can make it yours from a few panels, without touching code. Start with your colors and fonts, then edit the content in place or in the CMS.

  • 01

    Brand colors

    Open the Variables panel → Colors. Every class uses these variables, so changing Text/Primary or Background/Primary updates the whole site at once.

  • 02

    Fonts

    Upload your font in Site settings → Fonts, then pick it in Variables → Typography → Body Font. Every text style follows it.

  • 03

    Sizes & scale

    Everything is sized in em from the page-wrapper: 16px up to 1440px wide, growing to 21px on 1920px screens. The combo is--no-scale keeps a page at 16px everywhere; remove it to let that page grow. No text goes below 14px.

  • 04

    Class names

    Client-First naming: page-row_component for parts of a block, text-style-label for shared styles, is--last for variants. Reuse a class before creating a new one.

[Interactions]

  • Scroll

    Fade-up reveals

    Rows and cards below the fold fade up as they enter the screen. They're native Webflow interactions, named like about · page-row_component · scroll-fade-up.

  • Hover

    Project labels

    Hovering a project card on Home or Works shows its name in a small pill (feed_label).

  • Edit

    Change or remove one

    Select the element, open the Interactions panel and click the interaction to change its timing, distance or easing. Delete it there to remove the effect; the element stays visible.

  • Keep

    At least one

    Webflow only loads GSAP on pages with at least one interaction, and the custom code below needs it. If you strip a page of every reveal, keep one interaction on it.

[Custom code]

  • Footer

    One script

    All custom code lives in Site settings → Custom code → Footer code: the Lenis script, then script.js, then a short Webflow helper. No page has code of its own. The field holds 50,000 characters; the script uses about 39,000.

  • Head

    Early setup

    Site settings → Custom code → Head code holds the Lenis stylesheet, a tiny script that applies dark mode before the page shows and turns on the Welcome screen on the first visit, and one font-smoothing style.

  • GSAP

    GSAP integration

    GSAP comes from Webflow, not from the code fields. In Site settings → GSAP integration, keep ScrollTrigger and CustomEase ticked. Never add a second copy of GSAP.

  • Lenis

    Smooth scroll

    To turn it off, delete the Lenis script and stylesheet lines; the site falls back to normal scrolling. Inner scroll areas opt out with the attribute data-lenis-prevent.

  • Motion

    Reduced motion

    Visitors who turn on Reduce motion in their system get normal scrolling and instant transitions. Nothing to set up.

[Features]

Each effect is switched on by a custom attribute on an element (select it → Element settings → Custom attributes). Remove the attribute or the element and that effect simply stops; the rest keeps working.

  • 01

    Welcome screen

    Name, counter and year slide in once per browser tab. The Welcome screen is hidden in the Designer (display none) so you can edit the page under it; the site script shows it on the first visit in each tab. To edit it, select welcome_component in the Navigator and add the combo class is--shown, make your changes, then remove the combo. Hook: data-welcome. Off: delete the Welcome element at the top of each page.

  • 02

    Light / Dark toggle

    Switches the theme and remembers the choice. Hooks: data-theme-toggle on the button, data-theme-label on its two words.

  • 03

    Clock

    Shows the local time of 11 cities in turn. Hooks: data-clock-group, data-clock, data-clock-location. Edit the cities in the CITIES line of the script.

  • 04

    Avatar cycle

    Swaps the portrait every 6 seconds with a pixel effect. Hook: data-avatar-cycle; list the image URLs, separated by commas, in data-srcs.

  • 05

    Cursor brackets

    Two brackets follow the mouse on screens 768px and wider. No attribute: to turn it off, delete the line initCursor(); in the script.

  • 06

    Hover surprises

    Words in the Home bio change style on hover. Hook: data-egg with concept, code, ai, karts, gaming or photo.

  • 07

    Playlist card

    A Spotify player pops up over the "playlist" link. Hooks: data-music-popup on the link, data-music-card on the card. Change the playlist in the link and the embed's data-src.

  • 08

    Project videos

    Videos play only while they're on screen, which keeps the page light. Each video sits on top of the item's Cover image, which works as its poster. When an item has no video, the script removes the empty video. Hook: data-feed-video.

  • 09

    Project dialog

    Home cards open their details in a dialog with arrows, Esc and a shareable link. Hooks: data-feed-open on each card, data-feed-detail on its hidden detail block.

  • 10

    Underline links

    The line under email links slides out to the right and back in from the left on hover. Hook: data-link-line on the link, plus data-link-line-bar on its line element.

  • 11

    Post contents

    On a blog post, the contents list is built from the H2 headings of the post body, marks the section you're reading and fills a progress line. Style the one sample link in the Designer. Hooks: data-toc on the list block, data-toc-source on the Rich Text, data-toc-link on the sample link, data-toc-progress on the progress bar. A post with no H2 hides the list.

[CMS]

  • Works

    Your projects

    One item fills a Home card and its dialog, a Works card and a project page. Name, Cover Image or Cover Video and Summary show everywhere; Brief, Outcome, Gallery and Live URL fill the project page. Order sets the sequence.

  • Videos

    Image or video

    Cover Video and Detail Video take a direct link to an .mp4 file, not a YouTube page. Leave them empty and the Cover Image shows instead; it's also the video's poster. Webflow can't store video files, so any host with a public .mp4 link works. The demo uses Cloudflare R2, free up to 10 GB: create a bucket, allow public access, upload the file and paste its link. Keep videos short, muted and a few MB each.

    Get started (opens in a new tab)Public access (opens in a new tab)Upload files (opens in a new tab)Pricing (opens in a new tab)

  • Tools

    Made with chips

    A short list of tool names. Pick them in each project's Tools field to show the "Made with" chips.

  • Blog

    Your writing

    Each post fills a card on the Blog page and its own post page. Add a post in the CMS panel and it appears in both, newest first.

[Theme]

  • Colors

    Two modes

    The Colors collection has two modes. Switch the Variables panel to Dark to edit the dark palette; the Light values stay untouched.

  • Toggle

    How it switches

    The toggle adds the class theme-dark to the Body, which applies the Dark mode, and remembers the visitor's choice.

  • Light only

    Ship one theme

    Delete the Light / Dark toggle from each page header. Without it the site always opens in Light.