Dynamic Viewport Height (dvh, svh e lvh) no Framer

Nativamente, o Framer só permite trabalhar com vh. Em muitos casos isso funciona, mas na versão mobile pode gerar comportamentos inesperados.

O que é Viewport Height?

Viewport height é a altura visível da tela do navegador em um determinado momento.

Quando você define uma seção como 100vh, está dizendo que ela deve ocupar toda a altura disponível da tela (muito comum em heros fullscreen).

O problema

Na prática, a maioria dos designers usa 100vh para criar seções fullscreen, especialmente no hero. O problema é que, em dispositivos móveis, essa altura não é fixa. A barra de navegação do browser pode aparecer ou desaparecer, alterando o espaço visível e nem sempre o vh acompanha essa mudança:

• Navegadores móveis têm barra de endereço e navegação

• Essa barra aparece e desaparece conforme o scroll

• O vh não se adapta a essa mudança

Esse é o principal problema: usar só o vh no Framer pode esconder elementos importantes atrás da navegação do browser.

Novas unidades de VH (e quando usar cada uma)

Para resolver esse tipo de problema, o CSS introduziu novas unidades de viewport que levam em conta o comportamento real do navegador.

Dynamic Viewport Height (dvh)

O dvh representa a altura dinâmica da viewport, atualizando conforme a interface do navegador muda.

Use quando:

• O layout precisa reagir ao scroll

• Você quer que a altura se ajuste em tempo real

• A experiência precisa ser totalmente adaptável

Small Viewport Height (svh)

O svh representa a menor altura possível da viewport, considerando a barra do navegador sempre visível.

Use quando:

• Estabilidade é prioridade

• Você quer garantir que nada fique escondido

• Trabalha com layouts mobile mais densos

Esse é o meu preferido, e geralmente o mais seguro. Garante que nenhum elemento será cortado, especialmente no hero.

Large Viewport Height (lvh)

O lvh representa a maior altura possível da viewport, assumindo que a barra do navegador está oculta. Recomendo usar apenas em casos muito específicos.

Use quando:

• O design pressupõe o máximo de altura disponível

• O foco é impacto visual

• Pequenos cortes não são um problema

Como aplicar no Framer

Hoje, o Framer ainda não tem dvh, svh e lvh na interface. A solução é usar um Code Override:

1) Crie um novo arquivo

No seu projeto no Framer, vá até a aba Assets → Code → New File para criar um novo arquivo de código.

2) Cole o código abaixo

Delete o conteúdo padrão e cole este código:

import type { ComponentType } from "react"

export function withDynamicViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100dvh" }}
            />
        )
    }
}

export function withLargeViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100lvh" }}
            />
        )
    }
}

export function withSmallViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100svh" }}
            />
        )
    }
}

import type { ComponentType } from "react"

export function withDynamicViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100dvh" }}
            />
        )
    }
}

export function withLargeViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100lvh" }}
            />
        )
    }
}

export function withSmallViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100svh" }}
            />
        )
    }
}

import type { ComponentType } from "react"

export function withDynamicViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100dvh" }}
            />
        )
    }
}

export function withLargeViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100lvh" }}
            />
        )
    }
}

export function withSmallViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100svh" }}
            />
        )
    }
}

import type { ComponentType } from "react"

export function withDynamicViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100dvh" }}
            />
        )
    }
}

export function withLargeViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100lvh" }}
            />
        )
    }
}

export function withSmallViewportHeight(
    Component: ComponentType
): ComponentType {
    return (props: any) => {
        return (
            <Component
                {...props}
                style={{ ...props.style, height: "100svh" }}
            />
        )
    }
}

3) Aplique o override

1. Selecione a seção

2. Vá na aba "Code Overrides" no painel direito.

3. Selecione o arquivo de código que você criou.

4. Escolha o valor desejado:

   withLargeViewportHeight, withDynamicViewportHeight ou withSmallViewportHeight

Conclusão

Enquanto o suporte nativo não chega, esse Code Override é a forma mais prática de ter controle sobre o viewport e entregar um design mais consistente.

Se você quer entregar um trabalho profissional, entender e aplicar dvh, svh e lvh faz diferença na qualidade final do projeto.

————————————-

1. O que é viewport height?

Viewport height é a altura visível da tela do navegador. Quando você usa 100vh, a seção ocupa toda a altura da viewport naquele momento.

2. Por que usar apenas vh pode causar problemas no mobile?

Em dispositivos móveis, a barra de navegação do browser aparece e desaparece conforme o scroll. O vh não se adapta bem a essas mudanças, o que pode fazer com que partes do layout fiquem escondidas atrás da navegação.

3. O Framer suporta dvh, svh e lvh nativamente?

Não. Atualmente, o Framer permite apenas o uso de vh na interface visual. Para trabalhar com unidades de viewport dinâmicas, é necessário usar Code Overrides.

4. Qual a diferença entre as unidades?

• dvh se adapta dinamicamente às mudanças da viewport.

• lvh considera a maior altura possível da viewport.

• svh considera a menor altura possível da viewport, evitando cortes no mobile.

5. Qual dessas unidades é a mais segura?

Na maioria dos casos, svh é a opção mais segura, pois garante que nenhum conteúdo importante fique escondido atrás da navegação do browser.