Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home (default)src/app/page.tsx
• Home 1 - Creative Studiosrc/app/(homes)/home-1/page.tsx
• Home 2src/app/(homes)/home-2/page.tsx
• Home 3src/app/(homes)/home-3/page.tsx
• Home 4src/app/(homes)/home-4/page.tsx
• Home 5src/app/(homes)/home-5/page.tsx
• Home 6src/app/(homes)/home-6/page.tsx
• Home 7src/app/(homes)/home-7/page.tsx
• Home 8src/app/(homes)/home-8/page.tsx
• Home 9src/app/(homes)/home-9/page.tsx
• Home 10src/app/(homes)/home-10/page.tsx
• Home 11src/app/(homes)/home-11/page.tsx
• Home 12src/app/(homes)/home-12/page.tsx
• Aboutsrc/app/(about)/about-us/page.tsx
• Servicessrc/app/(service)/service/page.tsx
• Portfolio Gridsrc/app/(portfolio)/portfolio-grid-col-3/page.tsx
• Portfolio Detailssrc/app/(portfolio-details)/portfolio-details-1/page.tsx
• Teamsrc/app/(team)/team/page.tsx
• Blogsrc/app/(blog)/blog-modern/page.tsx
• Contactsrc/app/(contact)/contact/page.tsx
• Pricingsrc/app/pricing/page.tsx
• FAQsrc/app/faq/page.tsx

Ключові фішки

• Magnetic dual-layer cursor with element-aware label swap

  Де знайти

  src/plugins/tp-cursor.js, src/pages/homes/home-1.tsx body class 'tp-magic-cursor', src/components/project/project-one.tsx [data-cursor='View<br>Demo']

  Чому цікаво

  A second 'ball' follower lerps behind the main dot and grows, fades or labels itself based on data-cursor attributes on hovered elements, achieving a Cargo/Awwwards-style cursor without an external lib.

  Коли використовувати

  Portfolio sites where you want hovered tiles to trigger an inline pointer label and a soft lag follower instead of generic cursor styling.

  Техніка

  Vanilla pointer events with rAF lerp, jQuery offset helpers and CSS classes toggled per data-cursor target.

• Scroll-pinned full-bleed banner under an asymmetric gallery

  Де знайти

  src/pages/homes/home-1.tsx tp-project-full-img-wrap timeline, src/components/project/project-one.tsx .tp-project-full-img

  Чому цікаво

  ScrollTrigger pins a single hero-strip image with pinSpacing:false so the testimonial section slides over it like a curtain reveal — a pattern that needs only ~12 lines of GSAP and zero extra markup.

  Коли використовувати

  When you want one trophy image to act as a transition between two scroll sections without parallax math or a third-party scroller.

  Техніка

  GSAP ScrollTrigger pin + pinSpacing:false on a fixed-height section with a CSS background-image.

• Horizontal scrub marquee on serif/outline mixed text

  Де знайти

  src/components/project/project-text-line.tsx, src/utils/scroll-marque.ts

  Чому цікаво

  A long row of repeated 'Co(shape)lest Project' tokens (alternating filled and outlined glyphs with an inline shape image) is translated -80% via scrub:true, producing a reading-pace marquee that doubles as a section divider.

  Коли використовувати

  As a kinetic divider between portfolio rows when you want typography itself to be the decoration.

  Техніка

  GSAP timeline + ScrollTrigger scrub on a wide flex container of mixed-glyph spans.

• Awards list with sticky hover-swapped thumbnails

  Де знайти

  src/components/award/award-one.tsx setActiveThumb, public/assets/scss/layout/pages/_award.scss

  Чому цікаво

  Each row's onMouseEnter sets activeThumb state which toggles the visible image in a left-column stack; combines a media-table interaction with React state instead of CSS-only sibling tricks, surviving SSR and accessible focus.

  Коли використовувати

  Press/awards or recognition sections where you want a stacked image preview that mirrors which row the visitor is reading.

  Техніка

  React useState + conditional CSS class on the image stack; no GSAP needed for the swap itself.

• Marquee team rail combining Swiper + scroll-driven X shift

  Де знайти

  src/components/team/team-one.tsx, src/utils/scroll-marque.ts teamMarqueAnim

  Чому цікаво

  Swiper handles the 6-up loop while a separate ScrollTrigger nudges .tp-team-item.marque from x:25% to x:-100% on scrub — a cheap way to layer continuous slider motion with parallax-on-scroll, plus a per-card mousemove parallax via tp-hover-btn-wrapper.

  Коли використовувати

  Team or roster strips that should feel alive even when the user is not actively dragging the slider.

  Техніка

  swiper/react Autoplay+FreeMode modules, GSAP ScrollTrigger scrub, hover parallax via mousemove + GSAP.

• Char-level reveal driven by GSAP SplitText with perspective

  Де знайти

  src/utils/title-animation.ts charAnimation, src/components/service/service-one.tsx .tp-char-animation

  Чому цікаво

  Section titles are split into chars with perspective:300 and animated x:100, autoAlpha:0 stagger:0.05 — produces a 3D-tilt sweep that reads cleaner than typical fade-up titles and reuses GSAP's premium SplitText plugin bundled in /src/plugins.

  Коли використовувати

  Editorial section headers where you want titles to feel like they tilt into place rather than fade.

  Техніка

  GSAP SplitText (paid plugin, vendored) + ScrollTrigger toggleActions:'play none none none'.

• Floating sticky contact-shape with rotating PNG layers

  Де знайти

  src/pages/homes/home-1.tsx tp-footer-shape-wrap, public/assets/img/home-01/footer/footer-circle-shape-*.png

  Чому цікаво

  A bottom-right circular badge linking to /contact stays z-index-5 'smooth' through the smooth-scroll wrapper and stacks two PNG shapes that rotate at different speeds via CSS keyframes — small thing, but it makes the whole site feel inhabited.

  Коли використовувати

  When you need a persistent CTA call-out (Hire me / Contact) that is tactile but won't conflict with a fixed header.

  Техніка

  CSS rotation keyframes + position:fixed inside ScrollSmoother content.

Компоненти