---
title: "Smooth Full-Page Web — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Kateryna Dei · Sections. Smooth Full-Page Sections"
canonical: "https://framer.elliotli.dev/component/smooth-full-page-web"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Smooth Full-Page Web

# Smooth Full-Page Web

Smooth Full-Page Sections

[View on Framer](https://framer.com/marketplace/components/smooth-full-page-web/?via=elliot-li)

![Smooth Full-Page Web preview image 1](https://framer.elliotli.dev/og/component/smooth-full-page-web/d72c00a74c729ae4/1600x1200.jpg)

## Summary

Smooth Full-Page Sections

## Description

### Transform your landing pages with smooth, full-screen snap scrolling! 🚀 **Smooth Full-Page Sections** brings an immersive, high-end scrolling experience directly to Framer. Built with strict performance standards, it delivers fluid section transitions on live sites while staying lightweight inside the editor.

## ✨ Key Features

-   ⚡ **Full-Page Snap Scrolling:** Automatically snaps sections to 100% viewport height (`100vh`).
    
-   🛡 **Canvas & SSR Safe:** Built using official `useIsStaticRenderer` checks for zero editor lag and smooth exports.
    
-   🎨 **Flexible Backgrounds:**
    
    -   **Color:** Minimal solid backgrounds.
        
    -   **Image:** Supports adjustable **Blur** filters.
        
    -   **Video:** Auto-playing, looped MP4/WebM videos.
        
-   🌓 **Dynamic Theme Adaptation:** Nav links and side text dynamically adjust colors based on the active section's settings.
    
-   📱 **Mobile Controls:** Optional vertical text rotation and side-text visibility toggles for small screens.
    
-   🪄 **Fluid Transitions:** Smooth CSS entry animations for headings.
    

## ⚙ Property Controls Guide

Customize everything directly from Framer’s right sidebar:

-   🔑 **License Key:** Enter your `fullpage.js` key (GPLv3 by default).
    
-   🏷 **Logo / Brand:** Top-left branding text.
    
-   📜 **Side Text:** Position vertical scroll text (_Left_ / _Right_).
    
-   🗂 **Sections Array:**
    
    -   **Title & Colors:** Section heading & custom text color.
        
    -   **BG Type:** Toggle _Color_, _Image_, or _Video_.
        
    -   **Blur & Overlay:** Adjust image blur and dark overlay opacity for readability.
        
    -   **Mobile Rotate:** Toggle vertical header rotation for mobile.
        

## 🚀 Quick Setup

1.  Drag **Smooth Full-Page Sections** onto your canvas.
    
2.  Set **Width** and **Height** layout constraints to **Fill**.
    
3.  Add your sections in the **Property Controls** panel.
    
4.  Publish your project to see the live snap-scrolling in action! 🌟
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #2821

## Details

- **Author**: Kateryna Dei
- **Price**: $6.00
- **Published**: 2026-08-14
- **Updated**: 2026-08-15
- **Added**: 2026-08-14
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes