Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home v1home-1.html
• Home v2 (Personal)home-2.html
• Portfolio Grid 1portfolio-1.html
• Portfolio Grid 2portfolio-2.html
• Portfolio Sliderportfolio-3.html
• Project 1project-1.html
• Project 2project-2.html
• Project 3project-3.html
• Project 4project-4.html
• Project 5project-5.html
• Project 6project-6.html
• Services Listservices.html
• Single Serviceservice.html
• Teamteam.html
• Blogblog.html
• Blog Innerblog-inner.html
• Publicationpublication.html
• Contactcontact.html
• 404404.html

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

• Stateful magnetic cursor with contextual labels (More / Choose / arrow / accent)

  Де знайти

  js/main.js (lines ~232-360), home-1.html .mil-ball

  Чому цікаво

  One ball element absorbs four behaviours via class targets (.mil-drag, .mil-more, .mil-choose, .mil-accent-cursor); each hover switches the inner SVG/label scale on a 0.2s GSAP tween, so the same custom cursor reads completely differently across hero, sliders and links without any JS state machine.

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

  You want a portfolio or agency site cursor that does more than follow the pointer — labelled hover states on key interactive zones.

  Техніка

  GSAP, jQuery hover delegation, CSS scale transforms

• Sequenced split-text preloader that wipes a brand string with an accent box

  Де знайти

  js/main.js (timeline at lines 51-116), home-1.html .mil-preloader

  Чому цікаво

  The intro plays three staggered words, then a left-anchored orange box stretches to 100% width and immediately collapses from the right while the brand string fades in underneath — a single reusable timeline pattern that doubles as the cue for revealing every .mil-up element on the page.

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

  You need a brand-stating preloader that hands off naturally to a wholesale FromTo of every above-the-fold animated element.

  Техніка

  GSAP timeline with relative offsets, CSS reveal box

• Scroll-driven CSS scale parallax via data-value-1 / data-value-2

  Де знайти

  js/main.js (.mil-scale block ~422-439), home-1.html .mil-banner .mil-animation

  Чому цікаво

  Authors annotate any element with two data values and ScrollTrigger scrubs gsap.fromTo(scale: v1, scale: v2) — the same primitive drives the giant background dodecahedrons in the hero and the subtle 1.0->1.2 zoom on portrait images, with no per-element JS.

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

  You want declarative scroll-scrubbed parallax/zoom without writing one ScrollTrigger per element.

  Техніка

  GSAP ScrollTrigger scrub, HTML data attributes

• Animated dodecahedron + line decoration cloned via JS into multiple frames

  Де знайти

  home-1.html .mil-hidden-elements, js/main.js append section ~141-146, scss/_components.scss .mil-dodecahedron

  Чому цікаво

  A single 3D wireframe dodecahedron and a tall lines SVG live hidden once and are jQuery-cloned into every .mil-animation / .mil-lines-place placeholder; CSS handles a 100s rotateXYZ keyframe and a 10s vertical jump, so heavy-looking decoration costs almost nothing in markup.

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

  You want repeating ambient ornaments (geometric loops, line patterns) without copying SVGs into every section.

  Техніка

  CSS keyframes, transform-style: preserve-3d, jQuery clone() + appendTo()

• Avatar-bullet testimonials slider with fade + Swiper parallax

  Де знайти

  home-1.html .mil-reviews-slider, .mil-revi-pagination, js/main.js mySwiper config

  Чому цікаво

  Pagination bullets are 110px circles holding the customer's portrait via background-image and an inset accent ring marks the active state; the slide content uses Swiper's parallax data attributes for a -200 horizontal offset and opacity 0 on entrance, while the slider itself runs in fade mode so visuals overlap rather than translate.

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

  You want a testimonials section that immediately reads as 'choose a person' rather than 'choose slide N'.

  Техніка

  Swiper (effect: fade, parallax, custom renderBullet), CSS box-shadow rings

• Linear infinite logo marquee using Swiper free-mode

  Де знайти

  home-1.html .mil-infinite-show, js/main.js (~526-541), scss/_components.scss .mil-infinite-show .swiper-wrapper { transition-timing-function: linear }

  Чому цікаво

  Instead of a CSS @keyframes translate, the marquee uses Swiper with autoplay delay 0, loop true, freeMode true, speed 5000 and a CSS override forcing linear timing on swiper-wrapper — gives a proper infinite scroll that pauses on hover/touch and reflows with breakpoints.

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

  You need a logo strip that survives reordering, responsive item counts and touch gestures without bespoke JS.

  Техніка

  Swiper.js (autoplay+loop+freeMode), CSS transition-timing-function override

• Page-to-page transitions via Swup with shared menu container

  Де знайти

  home-1.html script tags, js/main.js Swup options ~21-27 and swup:contentReplaced ~616-700

  Чому цікаво

  Swup is configured with two containers (#swupMain and #swupMenu) so the off-canvas menu persists across navigations; on contentReplaced the script resets scroll, refreshes ScrollTrigger, re-clones decorations and re-binds the accordion — a reusable pattern for SPA-feeling static sites.

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

  You're building a static HTML multi-page site that should feel like an SPA with persistent UI shells.

  Техніка

  Swup.js, jQuery re-init hooks, ScrollTrigger.refresh()

• Hover service card that reveals body text and grayscale-to-color arrow

  Де знайти

  scss/_components.scss .mil-service-card-sm (~1238-1300), home-1.html services section

  Чому цікаво

  At rest the card shows only a heading; on hover the description fades-up, the icon button scales from 0.3 to 1 and lifts grayscale, and a 4px accent line sweeps in from the left — three coordinated transitions on a single anchor with no JS, all driven by CSS variables for timing ($t-md, $t-lg).

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

  You want a dense services grid that stays calm at rest but rewards intent without a click.

  Техніка

  CSS transitions, filter: grayscale, transform: scale, ::before pseudo-element

Компоненти