TFTL

DEMO PAGE

DEMO PAGE

SLIDER PAGE

SLIDER PAGE

FORM PAGE

FORM PAGE

Astro boilerplate

The same animation layer as the Nuxt 4 boilerplate — GSAP, Lenis, split-text reveals and scroll-driven components — with plain TypeScript instead of Vue.

GSAP
LENIS
ASTRO
SPLIT TEXT
SCROLL TRIGGER
GSAP
LENIS
ASTRO
SPLIT TEXT
SCROLL TRIGGER

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Mountain peaks

Mountain peaks

Dawn breaks over the snowy ridge, painting the slopes in pink and gold light.

Ocean surf

Ocean surf

Waves crash against the shore again and again, leaving foam and shells.

City lights

City lights

The night city comes alive in neon signs and reflections on wet asphalt.

alt text
alt text
alt text
alt text
alt text
alt text
alt text
alt text
alt text
alt text
alt text
What does this boilerplate include?

Title text

GSAP with custom eases, Lenis smooth scrolling, scroll-reveal animations, parallax, a draggable carousel, a lightbox and a set of form controls.

Title text

Through data attributes. Add data-scroll-reveal-type="h" to a heading and it reveals on scroll — no JS needed on the page itself.

X

This modal has its own Lenis instance for inner scrolling, exactly like the Vue version did.

Click the overlay or the X to close it.

Loading preloader ...

0%

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor vero reiciendis aut corrupti, sit ea, labore explicabo illo inventore iste animi natus consectetur quo tempore obcaecati laborum quidem, ad quos.

01 / 00