Враження

Палітра

Типографіка

Бібліотеки

Сторінки

• Home v1 — UI/UX Designerindex.html
• Home v2 — Developerindex-2.html
• Home v3 — Photographer v1index-3.html
• Home v4 — Photographer v2index-4.html
• Home v5 — Digital Agencyindex-5.html
• Home v6 — Architecture v1index-6.html
• Home v7 — Architecture v2index-7.html
• Home v8 — Event Plannerindex-8.html
• Home v9 — Writerindex-9.html
• Home v10 — Lawyerindex-10.html
• Aboutabout.html
• Servicesservice.html
• Service Detailsservice-details-1.html
• Portfolioportfolio.html
• Blogblog.html
• Blog Detailsblog-details.html
• Contactcontact.html

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

• Per-letter typed-text preloader spelling the brand

  Де знайти

  index.html .loader-wrap .txt-loading, assets/js/script.js handlePreloader()

  Чому цікаво

  Most preloaders are spinners or counters; here each letter of POTU is wrapped in its own span with a data-text-preloader attribute and animated via the elpath.css keyframes, so the brand reveal IS the loading bar.

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

  Brand-led portfolio or studio launch where the first impression should reinforce the wordmark.

  Техніка

  HTML span-per-letter, elpath.css keyframes, jQuery delay/fadeOut handoff.

• GSAP SplitText with three reveal styles selected via parent class

  Де знайти

  assets/js/script.js title_animation(), index.html section.service-section .sec-title-animation.animation-style2

  Чому цікаво

  The same function reads animation-style1/2/3 from the closest ancestor and applies a different SplitText preset (rotateX dive, x-slide, plain fade) to the chars — letting authors pick a reveal flavour just by changing a class.

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

  Editorial sites that want section titles to enter with character-level choreography but without writing custom GSAP per section.

  Техніка

  GSAP, SplitText, ScrollTrigger.addEventListener('refresh', ...).

• data-depth parallax shapes driven by parallax.min.js

  Де знайти

  index.html section.banner-section .parallax-scene-2, index.html section.testimonial-section .parallax-scene-1

  Чому цікаво

  Decorative orbs/shapes carry data-depth values (0.40, 0.50, 0.60) and respond to mouse position so each section gets a subtle 3D dolly without writing any custom JS.

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

  Hero sections that need lightweight depth without resorting to WebGL or canvas.

  Техніка

  parallax.min.js (matthew.wagerfield) reading data-depth attributes.

• Class-toggle dark-mode switch with floating sun/moon

  Де знайти

  index.html .demo-switch, assets/css/darkmode.css, assets/js/script.js .demo_switch click handler

  Чому цікаво

  All dark styling lives in darkmode.css scoped under a single .dark_bg ancestor, and the toggle simply flips dark_bg / light_bg on .boxed_wrapper — no CSS variables, no localStorage, but trivially extendable.

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

  Static templates that want a working day/night demo without a build step or framework.

  Техніка

  jQuery toggleClass, side-by-side darkmode.css overrides.

• Big-text watermark behind every section

  Де знайти

  index.html section.service-section .big-text, index.html section.portfolio-section .big-text, index.html section.contact-section .big-text

  Чому цікаво

  Each major section has a pale, oversized word (service, Work, instagram, Let's talk) absolutely positioned behind the content — gives the page editorial rhythm without extra art direction.

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

  Single-page portfolios that want section transitions to feel like magazine spreads.

  Техніка

  CSS absolute positioning + huge font-size (180–280px) + low opacity.

• Lenis smooth scroll wired in with a 4-line raf loop

  Де знайти

  assets/js/script.js Lenis init

  Чому цікаво

  Lenis is initialised with no options and a minimal raf loop, so the entire site inherits inertia scroll without touching any other code — useful as a copy-paste recipe.

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

  Any HTML template where the client wants the buttery scroll feel from Awwwards sites without committing to Locomotive.

  Техніка

  lenis.min.js, requestAnimationFrame.

Компоненти