|
|
|
|
@ -5,14 +5,14 @@ import gsap from 'gsap'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export const PointScale=200; |
|
|
|
|
const PointSize=1; |
|
|
|
|
const PointSize=2; |
|
|
|
|
|
|
|
|
|
const PointDuration=10; |
|
|
|
|
const PointDuration=3; |
|
|
|
|
const KeywordOffset=0; |
|
|
|
|
|
|
|
|
|
const TextToShow=20; |
|
|
|
|
const TextToShow=10; |
|
|
|
|
|
|
|
|
|
export default function Point({point, index, totalPoints, result, showContent, showkeyword}) { |
|
|
|
|
export default function Point({point, index, totalPoints, result, showContent, showKeyword}) { |
|
|
|
|
|
|
|
|
|
const [payload, setPayload]=useState(); |
|
|
|
|
const [showPayload, setShowPayload]=useState(false); |
|
|
|
|
@ -94,7 +94,7 @@ export default function Point({point, index, totalPoints, result, showContent, s |
|
|
|
|
/> |
|
|
|
|
<Html> |
|
|
|
|
<div ref={refText} className='text-white p-2 w-[20vw] select-none translate-x-[-50%] translate-y-[-50%] text-center opacity-0'> |
|
|
|
|
{showkeyword && <div className='flex flex-row justify-center flex-wrap text=[2rem]'> |
|
|
|
|
{showKeyword && <div className='flex flex-row justify-center flex-wrap text=[2rem]'> |
|
|
|
|
{payload?.keywords.map((el, index)=><span key={index} className='px-2' style={{transform: `translate(${Math.random() * KeywordOffset}px,${Math.random() * KeywordOffset}px)`}}>{el}</span>)} |
|
|
|
|
</div>} |
|
|
|
|
{showContent && <pre className='text-xs w-[25vw] whitespace-pre-wrap text-white rounded p-2'>{(()=>{ |
|
|
|
|
|