Carregando…

Macbook Scroll

Display

Laptop mockup whose lid opens and screen scales as the page scrolls — adapted from Aceternity UI.

Instalação via CLI

$ npx kikitocn add macbook-scroll

Interno:

@/lib/utilsmotion

Exemplo de uso

Macbook ScrollExample.tsx

import { MacbookScroll } from "@/components/ui/cn/macbook-scroll/MacbookScroll";

export function MacbookScrollExample() {
  return (
    <MacbookScroll src="Exemplo" />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`src*`	`string`	—	Imagem/screenshot exibida na tela do notebook
`showGradient`	`boolean`	`true`	Fade do rodapé da tela sobre o fundo da página (usa bg-canvas)
`title`	`string \| React.ReactNode`	`undefined`	Texto acima do notebook, desaparece conforme rola
`badge`	`React.ReactNode`	`undefined`	Selo no canto da base do notebook
`closedLidBadge`	`React.ReactNode`	`undefined`	Conteúdo na tela fechada antes do scroll começar (default: um ponto discreto)
`className`	`string`	—	Classes CSS extras

Voltar para Display

Carregando…

Macbook Scroll

Macbook Scroll

Notebook que abre com o scroll

Construído com Kikito CN.

Notebook que abre com o scroll

Construído com Kikito CN.