@pipelinesolucoes/carousel 1.0.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +78 -0
- package/README.md +171 -0
- package/dist/app/layout.d.ts +6 -0
- package/dist/app/layout.js +19 -0
- package/dist/app/layout.js.map +1 -0
- package/dist/app/page.d.ts +1 -0
- package/dist/app/page.js +6 -0
- package/dist/app/page.js.map +1 -0
- package/dist/components/BookCarousel.d.ts +5 -0
- package/dist/components/BookCarousel.js +288 -0
- package/dist/components/BookCarousel.js.map +1 -0
- package/dist/components/CardMarquee.d.ts +8 -0
- package/dist/components/CardMarquee.js +56 -0
- package/dist/components/CardMarquee.js.map +1 -0
- package/dist/components/CarouselCircular.d.ts +11 -0
- package/dist/components/CarouselCircular.js +83 -0
- package/dist/components/CarouselCircular.js.map +1 -0
- package/dist/components/Carrossel.d.ts +15 -0
- package/dist/components/Carrossel.js +118 -0
- package/dist/components/Carrossel.js.map +1 -0
- package/dist/components/ImageCarousel.d.ts +16 -0
- package/dist/components/ImageCarousel.js +126 -0
- package/dist/components/ImageCarousel.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -0
- package/dist/pages/_app.d.ts +2 -0
- package/dist/pages/_app.js +20 -0
- package/dist/pages/_app.js.map +1 -0
- package/dist/pages/_document.d.ts +9 -0
- package/dist/pages/_document.js +33 -0
- package/dist/pages/_document.js.map +1 -0
- package/dist/theme.d.ts +35 -0
- package/dist/theme.js +142 -0
- package/dist/theme.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +60 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
LICENÇA COMERCIAL – PIPELINE SOLUÇÕES
|
|
2
|
+
|
|
3
|
+
Copyright (c) Pipeline Soluções
|
|
4
|
+
|
|
5
|
+
Este software é de propriedade da Pipeline Soluções e é disponibilizado
|
|
6
|
+
publicamente para instalação e avaliação. O uso comercial está sujeito
|
|
7
|
+
a licenciamento conforme os termos abaixo.
|
|
8
|
+
|
|
9
|
+
────────────────────────────────────────────────────────────
|
|
10
|
+
|
|
11
|
+
1. CONCESSÃO DE LICENÇA
|
|
12
|
+
|
|
13
|
+
A Pipeline Soluções concede ao Licenciado uma licença não exclusiva,
|
|
14
|
+
intransferível e revogável para utilizar este software em 1 (um)
|
|
15
|
+
projeto comercial, mediante aquisição de licença válida.
|
|
16
|
+
|
|
17
|
+
Projeto é definido como uma única aplicação em produção, incluindo
|
|
18
|
+
seus ambientes de desenvolvimento, homologação e staging.
|
|
19
|
+
|
|
20
|
+
────────────────────────────────────────────────────────────
|
|
21
|
+
|
|
22
|
+
2. USO PERMITIDO
|
|
23
|
+
|
|
24
|
+
É permitido:
|
|
25
|
+
- Instalar e avaliar o software livremente.
|
|
26
|
+
- Utilizar o software em projetos comerciais mediante licença válida.
|
|
27
|
+
- Modificar o código para uso interno no projeto licenciado.
|
|
28
|
+
|
|
29
|
+
────────────────────────────────────────────────────────────
|
|
30
|
+
|
|
31
|
+
3. USO PROIBIDO
|
|
32
|
+
|
|
33
|
+
É expressamente proibido:
|
|
34
|
+
- Utilizar o software em projetos comerciais sem licença válida.
|
|
35
|
+
- Redistribuir, sublicenciar, vender ou alugar este software,
|
|
36
|
+
integralmente ou em partes.
|
|
37
|
+
- Publicar o software como parte de outra biblioteca, framework
|
|
38
|
+
ou produto concorrente.
|
|
39
|
+
- Remover ou alterar avisos de copyright ou licenciamento.
|
|
40
|
+
|
|
41
|
+
────────────────────────────────────────────────────────────
|
|
42
|
+
|
|
43
|
+
4. SUPORTE E ATUALIZAÇÕES
|
|
44
|
+
|
|
45
|
+
A aquisição da licença pode incluir suporte básico e atualizações,
|
|
46
|
+
conforme acordado no momento da compra. A Pipeline Soluções não é
|
|
47
|
+
obrigada a fornecer suporte gratuito.
|
|
48
|
+
|
|
49
|
+
────────────────────────────────────────────────────────────
|
|
50
|
+
|
|
51
|
+
5. GARANTIAS E RESPONSABILIDADE
|
|
52
|
+
|
|
53
|
+
Este software é fornecido "NO ESTADO EM QUE SE ENCONTRA",
|
|
54
|
+
sem garantias de qualquer tipo, expressas ou implícitas.
|
|
55
|
+
Em nenhuma hipótese a Pipeline Soluções será responsabilizada
|
|
56
|
+
por danos diretos ou indiretos decorrentes do uso do software.
|
|
57
|
+
|
|
58
|
+
────────────────────────────────────────────────────────────
|
|
59
|
+
|
|
60
|
+
6. RESCISÃO
|
|
61
|
+
|
|
62
|
+
Esta licença será automaticamente rescindida em caso de violação
|
|
63
|
+
de qualquer um dos termos aqui estabelecidos. Em caso de rescisão,
|
|
64
|
+
o uso do software deverá ser interrompido imediatamente.
|
|
65
|
+
|
|
66
|
+
────────────────────────────────────────────────────────────
|
|
67
|
+
|
|
68
|
+
7. CONTATO
|
|
69
|
+
|
|
70
|
+
Para aquisição de licença comercial ou esclarecimento de dúvidas:
|
|
71
|
+
|
|
72
|
+
E-mail: contato@pipelinesolucoes.com.br
|
|
73
|
+
Site: https://www.pipelinesolucoes.com.br
|
|
74
|
+
|
|
75
|
+
────────────────────────────────────────────────────────────
|
|
76
|
+
|
|
77
|
+
Ao utilizar este software em um projeto comercial, você declara ter
|
|
78
|
+
lido, compreendido e concordado com os termos desta licença.
|
package/README.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
# @pipelinesolucoes/carousel
|
|
2
|
+
|
|
3
|
+
Biblioteca de **componentes de carrossel para React**, desenvolvida para **padronização visual**, **reutilização** e **escalabilidade** em aplicações modernas e design systems.
|
|
4
|
+
|
|
5
|
+
Este pacote faz parte do ecossistema de componentes da **Pipeline Soluções**.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Componentes disponíveis
|
|
10
|
+
|
|
11
|
+
A biblioteca inclui os seguintes componentes:
|
|
12
|
+
|
|
13
|
+
- **BookCarousel**
|
|
14
|
+
- **CardMarquee**
|
|
15
|
+
- **CarouselCircular**
|
|
16
|
+
- **Carrossel**
|
|
17
|
+
- **ImageCarousel**
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## ✨ Características
|
|
22
|
+
|
|
23
|
+
- ✅ Pronto para produção
|
|
24
|
+
- 🎨 Integração com Material UI
|
|
25
|
+
- ♿ Foco em acessibilidade
|
|
26
|
+
- 🧩 Ideal para design systems
|
|
27
|
+
- 🔄 Reutilizável em múltiplos projetos
|
|
28
|
+
- 📦 Publicado no npm com versionamento semântico
|
|
29
|
+
- 🔐 Preparado para licenciamento por projeto
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## 📥 Instalação
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install @pipelinesolucoes/carousel
|
|
37
|
+
ou
|
|
38
|
+
yarn add @pipelinesolucoes/carousel
|
|
39
|
+
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## 🚀 Uso básico
|
|
43
|
+
|
|
44
|
+
```
|
|
45
|
+
import { ImageCarousel } from "@pipelinesolucoes/carousel";
|
|
46
|
+
|
|
47
|
+
export function Example() {
|
|
48
|
+
return (
|
|
49
|
+
<ImageCarousel
|
|
50
|
+
width="100%"
|
|
51
|
+
height="100%"
|
|
52
|
+
images={[ '/image1.png', '/image2.png', '/image3.png' ]}
|
|
53
|
+
dotColor="#eeeeee"
|
|
54
|
+
activeDotColor="blue"
|
|
55
|
+
autoPlay={true}
|
|
56
|
+
autoPlayInterval={4000}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 🧩 Uso em Design Systems
|
|
63
|
+
|
|
64
|
+
Este pacote foi projetado para:
|
|
65
|
+
|
|
66
|
+
- padronização de ações e navegação
|
|
67
|
+
- reutilização entre projetos
|
|
68
|
+
- evolução incremental de UI
|
|
69
|
+
- integração com temas e tokens de design
|
|
70
|
+
|
|
71
|
+
Pode ser utilizado de forma isolada ou como parte de um design system maior.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## 🔐 Licença de uso comercial
|
|
76
|
+
|
|
77
|
+
Este pacote é publicamente acessível no npm, porém:
|
|
78
|
+
|
|
79
|
+
O uso comercial é licenciado por projeto.
|
|
80
|
+
|
|
81
|
+
**O que isso significa?**
|
|
82
|
+
|
|
83
|
+
O pacote pode ser instalado e avaliado livremente.
|
|
84
|
+
|
|
85
|
+
Para uso em projetos comerciais, é necessária a aquisição de uma licença válida por projeto.
|
|
86
|
+
|
|
87
|
+
**Definição de projeto**
|
|
88
|
+
|
|
89
|
+
Projeto = 1 aplicação em produção
|
|
90
|
+
(ex.: site institucional, sistema interno ou aplicação SaaS).
|
|
91
|
+
Ambientes de desenvolvimento, staging e homologação estão incluídos no mesmo projeto.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## 📄 O que a licença inclui
|
|
96
|
+
|
|
97
|
+
✔ Uso em 1 projeto
|
|
98
|
+
✔ Atualizações enquanto a licença estiver ativa
|
|
99
|
+
✔ Correções de bugs
|
|
100
|
+
✔ Suporte básico
|
|
101
|
+
✔ Evolução contínua do pacote
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## ⚙️ Configuração de licença (mock)
|
|
106
|
+
|
|
107
|
+
Após adquirir a licença, você receberá um Project ID e uma License Key.
|
|
108
|
+
|
|
109
|
+
No projeto, configure as variáveis de ambiente:
|
|
110
|
+
|
|
111
|
+
PIPESOL_PROJECT_ID=meu-projeto
|
|
112
|
+
PIPESOL_BUTTON_LICENSE_KEY=SUA-LICENSE-KEY-AQUI
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
Atualmente, a validação é local e não bloqueante, servindo como preparação para automação futura.
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## 🔁 Versionamento
|
|
120
|
+
|
|
121
|
+
Este projeto segue Semantic Versioning (SemVer):
|
|
122
|
+
|
|
123
|
+
1.0.1 – Correção de bugs
|
|
124
|
+
|
|
125
|
+
1.1.0 – Nova funcionalidade compatível
|
|
126
|
+
|
|
127
|
+
2.0.0 – Mudança incompatível
|
|
128
|
+
|
|
129
|
+
1.0.0-beta.x – Versões beta
|
|
130
|
+
|
|
131
|
+
Para listar as versões publicadas:
|
|
132
|
+
|
|
133
|
+
```
|
|
134
|
+
npm view @pipelinesolucoes/carousel versions --json
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
## 🚀 Processo de publicação
|
|
138
|
+
|
|
139
|
+
Este pacote é publicado exclusivamente via CI/CD utilizando GitHub Actions.
|
|
140
|
+
|
|
141
|
+
Características do processo:
|
|
142
|
+
|
|
143
|
+
- Publicação apenas por tags Git (vX.Y.Z)
|
|
144
|
+
- Autenticação via Trusted Publishing (OIDC)
|
|
145
|
+
- Nenhum token npm armazenado
|
|
146
|
+
- Tokens clássicos desabilitados
|
|
147
|
+
- Autenticação em dois fatores (2FA) obrigatória
|
|
148
|
+
- Publicações seguras, rastreáveis e reprodutíveis
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
## 📬 Aquisição de licença e contato
|
|
153
|
+
|
|
154
|
+
Para adquirir uma licença comercial ou obter mais informações:
|
|
155
|
+
|
|
156
|
+
📧 contato@pipelinesolucoes.com.br
|
|
157
|
+
🌐 https://www.pipelinesolucoes.com.br
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
## 📄 Licença
|
|
162
|
+
|
|
163
|
+
Copyright © Pipeline Soluções
|
|
164
|
+
Este software está sujeito a licença comercial por projeto.
|
|
165
|
+
Consulte o arquivo LICENSE para mais informações.
|
|
166
|
+
|
|
167
|
+
```
|
|
168
|
+
Se você quiser, eu também posso gerar agora o **arquivo `LICENSE`** (texto curto e claro) no mesmo padrão profissional pra você copiar e colar como `LICENSE` no repo.
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Geist, Geist_Mono } from "next/font/google";
|
|
3
|
+
import "./globals.css";
|
|
4
|
+
const geistSans = Geist({
|
|
5
|
+
variable: "--font-geist-sans",
|
|
6
|
+
subsets: ["latin"],
|
|
7
|
+
});
|
|
8
|
+
const geistMono = Geist_Mono({
|
|
9
|
+
variable: "--font-geist-mono",
|
|
10
|
+
subsets: ["latin"],
|
|
11
|
+
});
|
|
12
|
+
export const metadata = {
|
|
13
|
+
title: "Create Next App",
|
|
14
|
+
description: "Generated by create next app",
|
|
15
|
+
};
|
|
16
|
+
export default function RootLayout({ children, }) {
|
|
17
|
+
return (_jsx("html", { lang: "en", children: _jsx("body", { className: `${geistSans.variable} ${geistMono.variable}`, children: children }) }));
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/app/layout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,KAAK,CAAC;IACtB,QAAQ,EAAE,mBAAmB;IAC7B,OAAO,EAAE,CAAC,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,QAAQ,EAAE,mBAAmB;IAC7B,OAAO,EAAE,CAAC,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAa;IAChC,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,8BAA8B;CAC5C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,GAGR;IACA,OAAO,CACL,eAAM,IAAI,EAAC,IAAI,YACb,eAAM,SAAS,EAAE,GAAG,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,EAAE,YAC3D,QAAQ,GACJ,GACF,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function Home(): import("react/jsx-runtime").JSX.Element;
|
package/dist/app/page.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/app/page.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,OAAO,CACL,gCAAY,CACb,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
4
|
+
import { styled } from "@mui/material/styles";
|
|
5
|
+
import gsap from "gsap";
|
|
6
|
+
const SHEETS = 10;
|
|
7
|
+
const HOLD_DESKTOP = 1.6;
|
|
8
|
+
const TURN_DESKTOP = 1.55;
|
|
9
|
+
const HOLD_MOBILE = 2.2;
|
|
10
|
+
const TURN_MOBILE = 1.75;
|
|
11
|
+
const CoverImg = styled("img")(() => ({
|
|
12
|
+
overflow: "hidden",
|
|
13
|
+
width: "100%",
|
|
14
|
+
height: "100%",
|
|
15
|
+
display: "block",
|
|
16
|
+
boxSizing: "border-box",
|
|
17
|
+
objectFit: "cover",
|
|
18
|
+
borderRadius: "0 5% 5% 0",
|
|
19
|
+
}));
|
|
20
|
+
const PageImage = styled("img")(() => ({
|
|
21
|
+
overflow: "hidden",
|
|
22
|
+
width: "100%",
|
|
23
|
+
height: "100%",
|
|
24
|
+
display: "block",
|
|
25
|
+
boxSizing: "border-box",
|
|
26
|
+
objectFit: "cover",
|
|
27
|
+
borderRadius: "0 5% 5% 0",
|
|
28
|
+
padding: "16px",
|
|
29
|
+
}));
|
|
30
|
+
const PageImageBack = styled("img")(() => ({
|
|
31
|
+
overflow: "hidden",
|
|
32
|
+
width: "100%",
|
|
33
|
+
height: "100%",
|
|
34
|
+
display: "block",
|
|
35
|
+
boxSizing: "border-box",
|
|
36
|
+
objectFit: "cover",
|
|
37
|
+
borderRadius: "5% 0 0 5%",
|
|
38
|
+
padding: "16px",
|
|
39
|
+
}));
|
|
40
|
+
export default function BookCarousel({ bookScale = 1, coverSrc = "/capa.png", }) {
|
|
41
|
+
const rootRef = useRef(null);
|
|
42
|
+
const bookRef = useRef(null);
|
|
43
|
+
const [coverReady, setCoverReady] = useState(false);
|
|
44
|
+
// ✅ Preload + decode da capa
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
let alive = true;
|
|
47
|
+
if (typeof window === "undefined") {
|
|
48
|
+
setCoverReady(true);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
const img = new window.Image();
|
|
52
|
+
img.src = coverSrc;
|
|
53
|
+
const done = async () => {
|
|
54
|
+
try {
|
|
55
|
+
// @ts-ignore
|
|
56
|
+
if (img.decode)
|
|
57
|
+
await img.decode();
|
|
58
|
+
}
|
|
59
|
+
catch (_a) { }
|
|
60
|
+
if (!alive)
|
|
61
|
+
return;
|
|
62
|
+
setCoverReady(true);
|
|
63
|
+
};
|
|
64
|
+
if (img.complete) {
|
|
65
|
+
void done();
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
img.addEventListener("load", () => void done(), { once: true });
|
|
69
|
+
img.addEventListener("error", () => void done(), { once: true });
|
|
70
|
+
}
|
|
71
|
+
return () => {
|
|
72
|
+
alive = false;
|
|
73
|
+
};
|
|
74
|
+
}, [coverSrc]);
|
|
75
|
+
useLayoutEffect(() => {
|
|
76
|
+
if (!coverReady)
|
|
77
|
+
return;
|
|
78
|
+
const rootEl = rootRef.current;
|
|
79
|
+
const bookEl = bookRef.current;
|
|
80
|
+
if (!rootEl || !bookEl)
|
|
81
|
+
return;
|
|
82
|
+
const pages = Array.from(bookEl.querySelectorAll(".book__page"));
|
|
83
|
+
if (!pages.length)
|
|
84
|
+
return;
|
|
85
|
+
const ctx = gsap.context(() => {
|
|
86
|
+
const mm = gsap.matchMedia();
|
|
87
|
+
const setInitial = () => {
|
|
88
|
+
pages.forEach((page, index) => {
|
|
89
|
+
const t = page;
|
|
90
|
+
gsap.set(t, {
|
|
91
|
+
transformOrigin: "0% 50%",
|
|
92
|
+
transformStyle: "preserve-3d",
|
|
93
|
+
force3D: true,
|
|
94
|
+
willChange: "transform",
|
|
95
|
+
z: index === 0 ? 60 : -index,
|
|
96
|
+
zIndex: index === 0 ? 3000 : 1000 - index,
|
|
97
|
+
});
|
|
98
|
+
gsap.set(t, { clearProps: "rotationY" });
|
|
99
|
+
});
|
|
100
|
+
};
|
|
101
|
+
const buildTimeline = (opts) => {
|
|
102
|
+
const { hold, turn } = opts;
|
|
103
|
+
setInitial();
|
|
104
|
+
const tl = gsap.timeline({ repeat: -1, repeatDelay: 0.8 });
|
|
105
|
+
tl.eventCallback("onRepeat", () => setInitial());
|
|
106
|
+
const cover = pages[0];
|
|
107
|
+
// warm up
|
|
108
|
+
tl.to(cover, { rotationY: 0.01, duration: 0.001, ease: "none", immediateRender: false }, 0);
|
|
109
|
+
tl.to(cover, { rotationY: 0, duration: 0.001, ease: "none", immediateRender: false }, 0.002);
|
|
110
|
+
pages.forEach((page, index) => {
|
|
111
|
+
if (index === pages.length - 1)
|
|
112
|
+
return;
|
|
113
|
+
const target = page;
|
|
114
|
+
// ✅ CAPA: overload compatível (targets, duration, fromVars, toVars, position)
|
|
115
|
+
if (index === 0) {
|
|
116
|
+
tl.fromTo(target, turn, // duration
|
|
117
|
+
{ rotationY: 0 }, {
|
|
118
|
+
rotationY: -180,
|
|
119
|
+
ease: "power3.inOut",
|
|
120
|
+
immediateRender: false,
|
|
121
|
+
onStart: () => {
|
|
122
|
+
gsap.set(target, { zIndex: 5000 });
|
|
123
|
+
},
|
|
124
|
+
onComplete: () => {
|
|
125
|
+
gsap.set(target, { z: -13, zIndex: 1000 - index });
|
|
126
|
+
},
|
|
127
|
+
}, `+=${hold}`);
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
// Páginas internas
|
|
131
|
+
tl.to(target, { rotationY: -180, duration: turn, ease: "power3.inOut", immediateRender: false }, `+=${hold}`);
|
|
132
|
+
tl.to(target, { z: index, duration: 0.12, ease: "power1.out", immediateRender: false }, "<+=0.02");
|
|
133
|
+
});
|
|
134
|
+
return tl;
|
|
135
|
+
};
|
|
136
|
+
mm.add("(min-width: 900px)", () => {
|
|
137
|
+
const tl = buildTimeline({ hold: HOLD_DESKTOP, turn: TURN_DESKTOP });
|
|
138
|
+
return () => {
|
|
139
|
+
tl.kill();
|
|
140
|
+
};
|
|
141
|
+
});
|
|
142
|
+
mm.add("(max-width: 899px)", () => {
|
|
143
|
+
const tl = buildTimeline({ hold: HOLD_MOBILE, turn: TURN_MOBILE });
|
|
144
|
+
return () => {
|
|
145
|
+
tl.kill();
|
|
146
|
+
};
|
|
147
|
+
});
|
|
148
|
+
mm.add("(prefers-reduced-motion: reduce)", () => {
|
|
149
|
+
const tl = buildTimeline({ hold: 2.5, turn: 0.01 });
|
|
150
|
+
return () => {
|
|
151
|
+
tl.kill();
|
|
152
|
+
};
|
|
153
|
+
});
|
|
154
|
+
return () => {
|
|
155
|
+
mm.revert();
|
|
156
|
+
};
|
|
157
|
+
}, rootRef);
|
|
158
|
+
return () => {
|
|
159
|
+
ctx.revert();
|
|
160
|
+
};
|
|
161
|
+
}, [coverReady]);
|
|
162
|
+
const FrontHalf = ({ children }) => (_jsx("div", { className: "page__half page__half--front", children: children }));
|
|
163
|
+
const BackHalf = ({ children }) => (_jsx("div", { className: "page__half page__half--back", children: children }));
|
|
164
|
+
return (_jsxs("div", { ref: rootRef, className: "bookHost", style: {
|
|
165
|
+
width: "30vmin",
|
|
166
|
+
height: "40vmin",
|
|
167
|
+
minWidth: 150,
|
|
168
|
+
minHeight: 200,
|
|
169
|
+
position: "relative",
|
|
170
|
+
["--book-scale"]: bookScale,
|
|
171
|
+
}, children: [coverReady ? (_jsxs("div", { className: "book", ref: bookRef, children: [_jsx("div", { className: "book__spine" }), _jsxs("div", { className: "page book__page book__cover book__cover--front", children: [_jsx(FrontHalf, { children: _jsx(CoverImg, { src: coverSrc, alt: "Capa" }) }), _jsx(BackHalf, {})] }), Array.from({ length: SHEETS }).map((_, p) => {
|
|
172
|
+
const leftNumber = p * 2 + 1;
|
|
173
|
+
const rightNumber = p * 2 + 2;
|
|
174
|
+
return (_jsxs("div", { className: "page book__page", children: [_jsxs(FrontHalf, { children: [_jsx(PageImage, { src: "/img_a_autora_e3.webp", alt: `Página ${leftNumber}` }), _jsx("span", { className: "page__number", children: leftNumber })] }), _jsxs(BackHalf, { children: [_jsx(PageImageBack, { src: "/img_a_colecao.webp", alt: `Página ${rightNumber}` }), _jsx("span", { className: "page__number", children: rightNumber })] })] }, `sheet-${p}`));
|
|
175
|
+
}), _jsxs("div", { className: "page book__page book__cover book__cover--back", children: [_jsx(FrontHalf, {}), _jsx(BackHalf, { children: _jsx("span", { className: "code", children: "CONTRA CAPA" }) })] })] })) : (_jsx("div", { style: { width: "100%", height: "100%" } })), _jsx("style", { children: `
|
|
176
|
+
* { box-sizing: border-box; }
|
|
177
|
+
|
|
178
|
+
.bookHost{ overflow: visible; }
|
|
179
|
+
|
|
180
|
+
.page{
|
|
181
|
+
height: 100%;
|
|
182
|
+
width: 100%;
|
|
183
|
+
position: relative;
|
|
184
|
+
transform-style: preserve-3d;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.page__number{
|
|
188
|
+
position: absolute;
|
|
189
|
+
color: hsl(0, 0%, 50%);
|
|
190
|
+
bottom: 1rem;
|
|
191
|
+
font-size: 1.2vmin;
|
|
192
|
+
}
|
|
193
|
+
.page__half--front .page__number{ right: 1rem; }
|
|
194
|
+
.page__half--back .page__number{ left: 1rem; }
|
|
195
|
+
|
|
196
|
+
.page__half{
|
|
197
|
+
display:flex; align-items:center; justify-content:center;
|
|
198
|
+
height:100%;
|
|
199
|
+
position:absolute; top:0; left:0; width:100%;
|
|
200
|
+
|
|
201
|
+
/* ✅ remove clip-path (principal causa do “desfoque”) */
|
|
202
|
+
overflow: hidden;
|
|
203
|
+
|
|
204
|
+
/* ✅ micro-z estabiliza textura durante a rotação */
|
|
205
|
+
transform: rotateY(calc(var(--rotation) * 1deg))
|
|
206
|
+
translate3d(0, 0, calc((0.5 * var(--coefficient)) * 1px))
|
|
207
|
+
translateZ(0.01px);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.page__half--front{
|
|
211
|
+
--rotation: 0;
|
|
212
|
+
--coefficient: 0;
|
|
213
|
+
backface-visibility: hidden;
|
|
214
|
+
border-radius: 0 5% 5% 0;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.page__half--back{
|
|
218
|
+
--rotation: 180;
|
|
219
|
+
--coefficient: 2;
|
|
220
|
+
border-radius: 5% 0 0 5%;
|
|
221
|
+
backface-visibility: hidden;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.book{
|
|
225
|
+
height: 100%;
|
|
226
|
+
width: 100%;
|
|
227
|
+
position: relative;
|
|
228
|
+
|
|
229
|
+
transform: scale(var(--book-scale, 1));
|
|
230
|
+
transform-origin: top left;
|
|
231
|
+
|
|
232
|
+
transform-style: preserve-3d;
|
|
233
|
+
perspective: 1200px;
|
|
234
|
+
z-index: 10;
|
|
235
|
+
will-change: transform;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.book__spine{
|
|
239
|
+
left: 0;
|
|
240
|
+
top: 50%;
|
|
241
|
+
height: 94%;
|
|
242
|
+
width: 12px;
|
|
243
|
+
position: absolute;
|
|
244
|
+
background: black;
|
|
245
|
+
transform-origin: 0 50%;
|
|
246
|
+
transform: translate3d(0, -50%, -13px);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.book__page{
|
|
250
|
+
position: absolute;
|
|
251
|
+
left: 2%;
|
|
252
|
+
top: 50%;
|
|
253
|
+
border-radius: 0 5% 5% 0;
|
|
254
|
+
transform: translate(0, -50%);
|
|
255
|
+
height: 94%;
|
|
256
|
+
width: 94%;
|
|
257
|
+
transform-origin: 0% 50%;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.book__cover{ border-radius: 0 5% 5% 0; }
|
|
261
|
+
.book__cover--front .page__half--back{ border-right: 1rem solid black; }
|
|
262
|
+
.book__cover--back .page__half--front{ border-left: 1rem solid black; }
|
|
263
|
+
|
|
264
|
+
.book__page:not(.book__cover) .page__half{
|
|
265
|
+
background: white;
|
|
266
|
+
backface-visibility: hidden;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.book__cover .page__half{ background: hsl(0, 0%, 10%); }
|
|
270
|
+
.book__cover--front .page__half--front{ background: transparent; }
|
|
271
|
+
|
|
272
|
+
.code{
|
|
273
|
+
line-height: 1.2;
|
|
274
|
+
font-family: monospace;
|
|
275
|
+
white-space: pre-line;
|
|
276
|
+
max-width: 100%;
|
|
277
|
+
max-height: 100%;
|
|
278
|
+
font-weight: 700;
|
|
279
|
+
color: hsl(0, 0% 96%);
|
|
280
|
+
border-radius: 8px;
|
|
281
|
+
display: block;
|
|
282
|
+
overflow: hidden;
|
|
283
|
+
padding: 12px;
|
|
284
|
+
text-align: center;
|
|
285
|
+
}
|
|
286
|
+
` })] }));
|
|
287
|
+
}
|
|
288
|
+
//# sourceMappingURL=BookCarousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BookCarousel.js","sourceRoot":"","sources":["../../src/components/BookCarousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
3
|
+
import { motion, useAnimation } from "framer-motion";
|
|
4
|
+
import { Box, styled } from "@mui/material";
|
|
5
|
+
const ContainerSafe = styled('div') `
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
width: 100%;
|
|
8
|
+
position: relative;
|
|
9
|
+
display: flex;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
`;
|
|
12
|
+
const OuterWrapper = styled('div') `
|
|
13
|
+
width: 100%;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
position: relative;
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
`;
|
|
19
|
+
const InnerWrapper = styled('div') `
|
|
20
|
+
width: 100%;
|
|
21
|
+
max-width: 100vw;
|
|
22
|
+
position: relative;
|
|
23
|
+
overflow: hidden;
|
|
24
|
+
`;
|
|
25
|
+
const MotionDiv = styled(motion.div) `
|
|
26
|
+
display: flex;
|
|
27
|
+
gap: 48px;
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
height: fit-content;
|
|
30
|
+
`;
|
|
31
|
+
const CardMarquee = ({ direction = "left", speed = 50, children, }) => {
|
|
32
|
+
const controls = useAnimation();
|
|
33
|
+
const marqueeRef = useRef(null);
|
|
34
|
+
const distanceRef = useRef(0);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
const marquee = marqueeRef.current;
|
|
37
|
+
if (marquee) {
|
|
38
|
+
const totalWidth = marquee.scrollWidth / 2; // já que você duplica os children
|
|
39
|
+
distanceRef.current = direction === "left" ? -totalWidth : totalWidth;
|
|
40
|
+
controls.start({
|
|
41
|
+
x: [0, distanceRef.current],
|
|
42
|
+
transition: {
|
|
43
|
+
x: {
|
|
44
|
+
repeat: Infinity,
|
|
45
|
+
repeatType: "loop",
|
|
46
|
+
duration: speed,
|
|
47
|
+
ease: "linear",
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
}, [controls, direction, speed, children.length]);
|
|
53
|
+
return (_jsx(ContainerSafe, { children: _jsx(OuterWrapper, { children: _jsx(InnerWrapper, { children: _jsx(MotionDiv, { ref: marqueeRef, animate: controls, children: [...children, ...children].map((child, index) => (_jsx(Box, { sx: { width: "fit-content", height: "fit-content" }, children: child }, index))) }) }) }) }));
|
|
54
|
+
};
|
|
55
|
+
export default CardMarquee;
|
|
56
|
+
//# sourceMappingURL=CardMarquee.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CardMarquee.js","sourceRoot":"","sources":["../../src/components/CardMarquee.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;CAMlC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;CAMjC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;CAKjC,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;CAKnC,CAAC;AAQF,MAAM,WAAW,GAA+B,CAAC,EAC/C,SAAS,GAAG,MAAM,EAClB,KAAK,GAAG,EAAE,EACV,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,YAAY,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,MAAM,CAAS,CAAC,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,kCAAkC;YAC9E,WAAW,CAAC,OAAO,GAAG,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;YAEtE,QAAQ,CAAC,KAAK,CAAC;gBACb,CAAC,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC;gBAC3B,UAAU,EAAE;oBACV,CAAC,EAAE;wBACD,MAAM,EAAE,QAAQ;wBAChB,UAAU,EAAE,MAAM;wBAClB,QAAQ,EAAE,KAAK;wBACf,IAAI,EAAE,QAAQ;qBACf;iBACF;aACF,CAAC,CAAC;QACL,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAElD,OAAO,CACL,KAAC,aAAa,cACZ,KAAC,YAAY,cACX,KAAC,YAAY,cACX,KAAC,SAAS,IAAC,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,YAC1C,CAAC,GAAG,QAAQ,EAAE,GAAG,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAChD,KAAC,GAAG,IAAa,EAAE,EAAE,EAAC,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,aAAa,EAAC,YAC/D,KAAK,IADE,KAAK,CAET,CACP,CAAC,GACQ,GACC,GACF,GACD,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|