feat: docs.pivoine.art
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
'use client'
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import './PivoineDocsIcon.css'
|
||||
|
||||
interface PivoineDocsIconProps {
|
||||
size?: string
|
||||
@@ -38,9 +39,16 @@ export default function PivoineDocsIcon({
|
||||
handleClick()
|
||||
}
|
||||
|
||||
const wrapperClasses = [
|
||||
'pivoine-docs-icon-wrapper',
|
||||
isClicked && 'is-clicked',
|
||||
interactive && 'is-interactive',
|
||||
className
|
||||
].filter(Boolean).join(' ')
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`pivoine-docs-icon-wrapper ${isClicked ? 'is-clicked' : ''} ${interactive ? 'is-interactive' : ''} ${className}`}
|
||||
className={wrapperClasses}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouch}
|
||||
style={{ width: size, height: size }}
|
||||
@@ -117,7 +125,7 @@ export default function PivoineDocsIcon({
|
||||
fill={`url(#petal-gradient-${(i % 3) + 1})`}
|
||||
filter="url(#petal-glow)"
|
||||
transform={`rotate(${angle} 128 128)`}
|
||||
opacity="0.85"
|
||||
style={{ transformOrigin: '128px 128px' }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
@@ -135,7 +143,7 @@ export default function PivoineDocsIcon({
|
||||
fill={`url(#petal-gradient-${((i + 1) % 3) + 1})`}
|
||||
filter="url(#petal-glow)"
|
||||
transform={`rotate(${angle} 128 128)`}
|
||||
opacity="0.9"
|
||||
style={{ transformOrigin: '128px 128px' }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
@@ -153,14 +161,13 @@ export default function PivoineDocsIcon({
|
||||
fill={`url(#petal-gradient-${((i + 2) % 3) + 1})`}
|
||||
filter="url(#petal-glow)"
|
||||
transform={`rotate(${angle} 128 128)`}
|
||||
opacity="0.95"
|
||||
style={{ transformOrigin: '128px 128px' }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Center - Document pages */}
|
||||
<g className="center-docs">
|
||||
{/* Page stack */}
|
||||
<rect
|
||||
className="page page-3"
|
||||
x="102"
|
||||
@@ -232,289 +239,6 @@ export default function PivoineDocsIcon({
|
||||
<span className="label-text">Pivoine Docs</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<style jsx>{`
|
||||
.pivoine-docs-icon-wrapper {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
cursor: pointer;
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper:not(.is-interactive) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
filter: drop-shadow(0 10px 40px rgba(168, 85, 247, 0.3));
|
||||
transition: filter 0.4s ease;
|
||||
}
|
||||
|
||||
/* Background pulse */
|
||||
.bg-circle {
|
||||
animation: bg-pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Petal animations */
|
||||
.petal {
|
||||
transform-origin: 128px 128px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
/* Sparkles twinkle */
|
||||
.sparkle {
|
||||
animation: twinkle 2s ease-in-out infinite;
|
||||
}
|
||||
.sparkle-1 { animation-delay: 0s; }
|
||||
.sparkle-2 { animation-delay: 0.5s; }
|
||||
.sparkle-3 { animation-delay: 1s; }
|
||||
.sparkle-4 { animation-delay: 1.5s; }
|
||||
|
||||
/* Particles orbit */
|
||||
.particle {
|
||||
animation: orbit 8s linear infinite;
|
||||
transform-origin: 128px 128px;
|
||||
}
|
||||
.particle-1 { animation-delay: 0s; }
|
||||
.particle-2 { animation-delay: 2s; }
|
||||
.particle-3 { animation-delay: 4s; }
|
||||
.particle-4 { animation-delay: 6s; }
|
||||
|
||||
/* Center circle pulse */
|
||||
.center-circle {
|
||||
animation: center-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Pages subtle movement */
|
||||
.page {
|
||||
transform-origin: center;
|
||||
animation: page-float 3s ease-in-out infinite;
|
||||
}
|
||||
.page-1 { animation-delay: 0s; }
|
||||
.page-2 { animation-delay: 0.3s; }
|
||||
.page-3 { animation-delay: 0.6s; }
|
||||
|
||||
/* Text lines appear */
|
||||
.text-line {
|
||||
stroke-dasharray: 30;
|
||||
stroke-dashoffset: 30;
|
||||
animation: line-appear 2s ease-out forwards;
|
||||
}
|
||||
.line-1 { animation-delay: 0.2s; }
|
||||
.line-2 { animation-delay: 0.4s; }
|
||||
.line-3 { animation-delay: 0.6s; }
|
||||
.line-4 { animation-delay: 0.8s; }
|
||||
.line-5 { animation-delay: 1s; }
|
||||
|
||||
/* Hover effects */
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.08) translateY(-8px);
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover .pivoine-docs-icon {
|
||||
filter: drop-shadow(0 20px 60px rgba(168, 85, 247, 0.6));
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover .outer-petal {
|
||||
animation: petal-bloom 1.2s ease-out forwards;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover .middle-petal {
|
||||
animation: petal-bloom 1.2s ease-out 0.1s forwards;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover .inner-petal {
|
||||
animation: petal-bloom 1.2s ease-out 0.2s forwards;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover .center-circle {
|
||||
animation: center-glow 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover .sparkle {
|
||||
animation: sparkle-burst 0.8s ease-out infinite;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover .page {
|
||||
animation: page-fan 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Click effects */
|
||||
.pivoine-docs-icon-wrapper.is-clicked {
|
||||
animation: icon-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-clicked .pivoine-docs-icon {
|
||||
animation: icon-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
filter: drop-shadow(0 25px 80px rgba(168, 85, 247, 0.9));
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-clicked .petal {
|
||||
animation: petal-explode 0.8s ease-out;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-clicked .center-circle {
|
||||
animation: center-burst 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Ripple effect */
|
||||
.ripple-effect {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(168, 85, 247, 0.6) 0%, rgba(168, 85, 247, 0) 70%);
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
animation: ripple-expand 1s ease-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.icon-label {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #a855f7, #ec4899);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: label-shimmer 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@keyframes bg-pulse {
|
||||
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||
50% { opacity: 0.7; transform: scale(1.05); }
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
0%, 100% { opacity: 0.4; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.3); }
|
||||
}
|
||||
|
||||
@keyframes orbit {
|
||||
from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
|
||||
to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
|
||||
}
|
||||
|
||||
@keyframes center-pulse {
|
||||
0%, 100% { opacity: 0.6; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
@keyframes page-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-2px); }
|
||||
}
|
||||
|
||||
@keyframes line-appear {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes petal-bloom {
|
||||
0% { opacity: 0.85; }
|
||||
50% { opacity: 1; filter: url(#intense-glow); }
|
||||
100% { opacity: 0.95; filter: url(#petal-glow); }
|
||||
}
|
||||
|
||||
@keyframes center-glow {
|
||||
0%, 100% { opacity: 0.8; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.2); filter: url(#intense-glow); }
|
||||
}
|
||||
|
||||
@keyframes sparkle-burst {
|
||||
0%, 100% { opacity: 0.8; transform: scale(1); }
|
||||
50% { opacity: 1; transform: scale(1.8); }
|
||||
}
|
||||
|
||||
@keyframes page-fan {
|
||||
0% { transform: translateY(0) rotate(0deg); }
|
||||
100% { transform: translateY(-3px) rotate(2deg); }
|
||||
}
|
||||
|
||||
@keyframes icon-bounce {
|
||||
0% { transform: scale(1) translateY(0) rotateZ(0deg); }
|
||||
30% { transform: scale(0.9) translateY(0) rotateZ(0deg); }
|
||||
60% { transform: scale(1.15) translateY(-15px) rotateZ(180deg); }
|
||||
80% { transform: scale(0.95) translateY(0) rotateZ(360deg); }
|
||||
100% { transform: scale(1) translateY(0) rotateZ(360deg); }
|
||||
}
|
||||
|
||||
@keyframes icon-spin {
|
||||
0% { transform: perspective(1000px) rotateY(0deg); }
|
||||
50% { transform: perspective(1000px) rotateY(180deg); }
|
||||
100% { transform: perspective(1000px) rotateY(360deg); }
|
||||
}
|
||||
|
||||
@keyframes petal-explode {
|
||||
0% { transform: scale(1); opacity: 1; }
|
||||
50% { transform: scale(1.3); opacity: 0.8; filter: url(#intense-glow); }
|
||||
100% { transform: scale(1); opacity: 1; filter: url(#petal-glow); }
|
||||
}
|
||||
|
||||
@keyframes center-burst {
|
||||
0% { transform: scale(1); opacity: 0.8; }
|
||||
50% { transform: scale(1.8); opacity: 1; }
|
||||
100% { transform: scale(1); opacity: 0.8; }
|
||||
}
|
||||
|
||||
@keyframes ripple-expand {
|
||||
0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
|
||||
100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes label-shimmer {
|
||||
0%, 100% { filter: brightness(1); }
|
||||
50% { filter: brightness(1.3); }
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.05) translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pivoine-docs-icon-wrapper,
|
||||
.pivoine-docs-icon,
|
||||
.petal,
|
||||
.sparkle,
|
||||
.particle,
|
||||
.center-circle,
|
||||
.page,
|
||||
.text-line,
|
||||
.ripple-effect,
|
||||
.label-text {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.pivoine-docs-icon-wrapper.is-interactive:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch devices */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.pivoine-docs-icon-wrapper.is-interactive:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user