Liquid Glass React 💧✨

Este projeto é uma demonstração interativa do efeito "liquid glass" (vidro líquido/fosco) e de personalização de interface do usuário, construído com Next.js, React, ShadCN UI e Tailwind CSS. Explore como diferentes parâmetros visuais podem ser ajustados em tempo real para criar uma experiência de usuário moderna e atraente.

Funcionalidades Principais

• Estilo Liquid Glass Personalizável: Ajuste dinamicamente propriedades como:
  • Opacidade do fundo dos cards interativos
  • Nível de desfoque do efeito "glass"
  • Largura da borda dos cards
  • Parâmetros da sombra projetada (distância vertical, desfoque e opacidade)
• Interface Interativa: Controles deslizantes (sliders) permitem a visualização imediata das alterações.
• Componentização com ShadCN UI: Utilização de componentes da biblioteca ShadCN UI, conhecidos pela sua acessibilidade e flexibilidade.
• Estilização com Tailwind CSS: Design responsivo e moderno implementado com Tailwind CSS.
• Estrutura com Next.js: Aplicação React com renderização no lado do servidor (SSR) e geração de sites estáticos (SSG) otimizada pelo Next.js App Router.

Tecnologias Utilizadas

• Next.js (App Router)
• React
• TypeScript
• ShadCN UI
• Tailwind CSS
• Lucide React (Ícones)

Como Executar o Projeto Localmente

1. Clone o repositório:

   git clone https://github.com/laranjaeragnarok2/liquid-glass-react.git 
   cd liquid-glass-react

   (Nota: Atualize o URL do repositório se for diferente)

2. Instale as dependências:

   npm install
   # ou
   yarn install
   # ou
   pnpm install

3. Inicie o servidor de desenvolvimento:

   npm run dev
   # ou
   yarn dev
   # ou
   pnpm dev

   Abra http://localhost:9002 (ou a porta que estiver configurada) no seu navegador para ver o resultado.

Detalhes do Projeto

• Autor: @horyu.multimedia
• GitHub: https://github.com/laranjaeragnarok2
• Instagram: https://www.instagram.com/horyu.multimedia/

---

Este projeto foi desenvolvido com o auxílio do Firebase Studio.