Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home v1index.html
• Home v2version-2.html
• Landinglanding.html
• Blogblog-standard.html
• Blog Two Columnsblog-two-columns.html
• Blog Three Columnsblog-three-columns.html
• Blog Detailsblog-single.html
• 404404.html

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

• Step-snapped scroll-pinned service swap

  Де знайти

  index.html section.section-service-2, assets/js/gsapAnimation.js serviceScroll()

  Чому цікаво

  Instead of free scrubbing, ScrollTrigger.onUpdate quantises progress into integer steps and tweens the timeline to each step with `tweenTo`, throttling fast scrolls so each service card and background image gets a clean crossfade — and the whole rig tears itself down below 1200px width.

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

  You need a hero-stacked section that locks scrolling while swapping a few panels, but want crisper snap behaviour than scrub:true alone gives.

  Техніка

  GSAP, ScrollTrigger pin, manual onUpdate progress quantisation, debounced resize, conditional desktop init

• Award flip-image fan-out

  Де знайти

  index.html .wrap-flip-image .flip-image, assets/js/gsapAnimation.js gsapA2()

  Чому цікаво

  Six photos start stacked at the parent's centre, then a two-stage timeline first lifts them to centre and then explodes them along an arc with per-index x/y offsets, rotation, rotateX and rotateY for a faux-3D fan — recomputed responsively on resize.

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

  Award walls, gallery reveals, anywhere you want a deck of cards to fan into view as the user scrolls without a third-party plugin.

  Техніка

  GSAP timeline, ScrollTrigger toggleActions, per-element function-based tween values, resize re-init

• Canvas cursor trail with hue cycling

  Де знайти

  index.html canvas.cursor-trail#trail, assets/js/main.js cursorTrail()

  Чому цікаво

  A `canvas.cursor-trail` element captures pointermoves, draws connecting line segments with a slowly shifting HSL stroke, and uses fillRect with rgba alpha for a smooth fade — gated to xl viewports so mobile gets nothing.

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

  Portfolio or creative sites that want a signature cursor effect without dragging in a heavyweight library or coupling to GSAP.

  Техніка

  Native canvas 2D, requestAnimationFrame, hsl colour rotation, jQuery viewport gate

• Multi-bar preloader with clip-path reveal

  Де знайти

  index.html div.preloader, assets/js/gsapAnimation.js loader()

  Чому цікаво

  Eight inner bars fill to random widths in pairs, snap to 100%, recurse to the next pair, then animate a CSS custom property `--preloader-clip` to wipe the splash before kicking off `runAnimations()` — a single source of truth gating all entrance animations.

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

  When entrance choreography depends on assets being ready and you want a deterministic hand-off from loader to scroll-trigger setup.

  Техніка

  GSAP timeline, recursive delayedCall, CSS custom property + clip-path

• Hue-blend video hero overlay

  Де знайти

  index.html .section-hero-v1 .bg-video, assets/scss/component/elements/_section.scss .video-overlay

  Чому цікаво

  Two stacked overlays — one in the brand primary set to `mix-blend-mode: hue` and another semi-transparent black — lock the looping video into the brand colour without needing pre-graded footage; swapping `--primary` instantly re-tints the hero.

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

  Brand-tinted video heroes where you want one video master to work across multiple colour themes (the template ships eight `data-color-primary` swatches).

  Техніка

  CSS mix-blend-mode, CSS custom properties, layered absolute overlays

• Scroll-driven char-stagger colour reveal

  Де знайти

  index.html .text-color-change, assets/js/gsapAnimation.js changetext()

  Чому цікаво

  SplitText shatters the paragraph into words then chars; chars start at 32% white and tween to full white scrubbed against the section, giving a typewriter-like illumination that reverses as the section leaves the viewport.

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

  About sections or quote panels where the heading should ‘light up’ as the reader scrolls through it.

  Техніка

  GSAP, SplitText (paid plugin), ScrollTrigger scrub

• Tech-stack accordion marquees

  Де знайти

  index.html .section-tech-stack .wg-tech, assets/js/main.js infiniteSlide, assets/scss/component/elements/_section.scss .section-tech-stack

  Чому цікаво

  Each tool row is collapsed to a label and percent until activated; the active row expands to a full-bleed infinite marquee of duplicated logo and label pairs, so the page breathes — only one row plays at a time, saving repaint cost.

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

  Skill sections or category lists where you want only the focused row to be visually busy.

  Техніка

  Custom infiniteSlide jQuery plugin (assets/js/infinityslide.js), CSS active state toggle

• Magnetic hover-arrow inside cards

  Де знайти

  index.html .main-mouse-hover .tf-mouse, assets/js/gsapAnimation.js mouseHover()

  Чому цікаво

  A `.tf-mouse` element follows the cursor inside its container with eased lerp (0.1) and snaps to centre on mouseleave; cards reuse the same primitive for ‘View’ buttons and prev/next swiper arrows.

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

  Portfolio cards or media slides where a hovering CTA should feel attached to the cursor without external libraries.

  Техніка

  Vanilla requestAnimationFrame lerp, jQuery delegation, optional mode-2 opacity-only variant

Компоненти