Webfolio - Creative Agency & Portfolio Next.js Template
Кінематографічний темний Next.js портфоліо-шаблон з кастомним курсором, SVG-прелоадером, GSAP scroll-smoother та п'ятьма варіантами головної.
Враження
Webfolio — це Next.js-версія (App Router) HTML-набору Webfolio від UiCamp: насичено темний, кінематографічний шаблон креативного агентства / портфоліо з п'ятьма варіантами головної (Main, Modern Studio, Creative Agency, Digital Agency, Personal/Freelancer). Настрій — поєднання редакційного й техно-естетики: майже чорне полотно (#0f0f0f) з єдиним помаранчевим акцентом (#fd5b38) та неоново-лаймовим вторинним (#caff33), кінетичні марки, кастомний курсор, GSAP ScrollSmoother на кожній сторінці та SVG-прелоадер «завіса», що морфить криву в пряму лінію при вході. Заголовки й основний текст — Plus Jakarta Sans; Poppins завантажений, але фактично не використовується в body.
Шаблон підходить діджитал-агенціям, дизайн-студіям, фрілансерам та персональним портфоліо, яким потрібен виставковий настрій з виразною ієрархією й місцем під повноекранну графіку. Він не підійде продуктам зі світлою темою, щільними таблицями даних, ecommerce чи довгими лонгрідами — тут немає магазину, немає перемикача теми, а масштаб заголовка (h1: 70–105px) розрахований на героїв з фотографіями, що його витримають.
Продакшн-нюанси: побудований на Next 14.1 з output: 'export', тож публікується як повністю статичний сайт без SSR / server actions. Вендорний JS (GSAP, ScrollTrigger, ScrollSmoother, splitting.min.js, charming.min.js, isotope, imagesloaded) підвантажується як beforeInteractive Script-теги з /public/assets/js/, тому гідратація залежить від цих файлів — їх не можна виносити з /public чи тришейкінгом викидати. Розмітка навбару використовує Bootstrap 5, видалення Bootstrap CSS зламає меню. Ліцензія ThemeForest — дистрибуція лише для власних розгортань.
Палітра
Типографіка
Бібліотеки
Сторінки
- Home — Main
app/home-main/page.js - Landing (Demo Index)
app/page.js - Home — Modern Studio
app/home-modern-studio/page.js - Home — Creative Agency
app/home-creative-agency/page.js - Home — Digital Agency
app/home-digital-agency/page.js - Home — Personal / Freelancer
app/home-personal/page.js - About
app/page-about/page.js - Services
app/page-services/page.js - Service Details
app/page-services-details/page.js - Team
app/page-team/page.js - Team Details
app/page-team-details/page.js - Contact
app/page-contact/page.js - FAQ
app/page-FAQ/page.js - 404
app/page-404/page.js - Portfolio Gallery
app/portfolio-gallery/page.js - Portfolio Creative
app/portfolio-creative/page.js - Portfolio Creative Carousel
app/portfolio-creative-carousel/page.js - Portfolio Grid
app/portfolio-grid/page.js - Portfolio Masonry
app/portfolio-masonry/page.js - Project Details
app/project-details/page.js - Blog — Classic
app/blog-classic/page.js - Blog — Grid + Sidebar
app/blog-grid-sidebar/page.js - Blog — 3-Column Grid
app/blog-grid-3column/page.js - Blog Details
app/blog-details/page.js
Ключові фішки
GSAP ScrollSmoother smooth-scroll wrapper around the entire page
- Де знайти
- app/home-main/page.js, div#smooth-wrapper > div#smooth-content
- Чому цікаво
- Most templates wire ScrollSmoother on a separate container; here every page in the App Router wraps `<main>` and `<footer>` in `#smooth-wrapper > #smooth-content`, so smoothing is global and ScrollTrigger pinning composes cleanly with it.
- Коли використовувати
- You want frame-locked smooth scrolling without Lenis and need triggers that respect the smoothed scroll position.
- Техніка
- gsap + ScrollSmoother + ScrollTrigger loaded as Next.js `beforeInteractive` Script tags
SVG curtain preloader that morphs a curved-bottom shape to a flat line
- Де знайти
- components/common/loader.jsx, div.loader-wrap path#svg
- Чому цікаво
- Two-step `tl.to(svg, { attr: { d: curve } })` then to `flat` produces a peeling-canvas reveal that's smoother than scaleY tricks; the path-data tween is a non-obvious GSAP feature.
- Коли використовувати
- You want an entrance flourish that feels physical and hands off to a hero translate-up with negative timeline overlap.
- Техніка
- gsap timeline + SVG path attr animation; charming.js wraps each Loading letter for staggered text reveal
Magnetic cursor with two-stage hover behaviour
- Де знайти
- components/common/cusor.jsx, div.cursor
- Чому цікаво
- Cursor element follows mousemove globally, while every `.hover-this` target translates its inner `.hover-anim` proportionally to pointer offset (clamped to ±25px). Combining a global cursor with per-element magnet effects in 30 lines is unusually tight.
- Коли використовувати
- Portfolio / agency sites that want a cursor flourish without a heavyweight library.
- Техніка
- vanilla DOM events: mousemove + mouseleave; CSS transforms
Rolling-text per-letter hover that splits on the fly
- Де знайти
- common/rolling.js, components/common/Navbar.jsx span.rolling-text
- Чому цікаво
- Splits each nav label into spans at mount, duplicates the block, and CSS-transforms the second copy in on hover — gives every link the perpetual-motion vibe popular on award-show sites without SplitText.
- Коли використовувати
- Menus where every link should feel kinetic; reusable as a `<RollingText text=... />` component.
- Техніка
- vanilla DOM + CSS transforms; no external libs
Notched-corner sub-bg captions on portfolio cards
- Де знайти
- components/home-main/Portfolio.jsx span.shap-left-top svg
- Чому цікаво
- Each project caption uses four absolutely-positioned 11x11 SVG quarter-circle shapes coloured to match the background, faking inner-rounded notches around the dark caption pill. Cheap to render, very distinctive look.
- Коли використовувати
- When you want your card captions to feel like postage stamps or speech bubbles without complex masks.
- Техніка
- raw inline SVG paths; no JS
Twin-direction stroked + filled marquee bands
- Де знайти
- components/home-main/Marq.jsx section.opacity-7, public/assets/scss/utility/animation.scss
- Чому цікаво
- Two `.main-marq` rails stack: one with `text-stroke: 1px` (`strok` class) running left, the other solid running right. The CSS-only horizontal infinite scroll is keyframed and never relies on JS measurement.
- Коли використовувати
- Hero or section divider that needs visual interest while the eye rests; works under `o-hidden` containers without overflow tricks.
- Техніка
- CSS @keyframes; .slide-har with .st1/.st2 directions and .strok modifier
Mega-menu populated with thumbnail tiles for every demo
- Де знайти
- components/common/Navbar.jsx li.nav-item.dropdown div.mega-menu
- Чому цікаво
- The Demos dropdown isn't a text list — it renders five image+label cards that mirror the home variants the buyer just chose between, doubling as in-product cross-sells. Hover state is JS-driven so it works on touchpad-hover Macs.
- Коли використовувати
- Multi-template products where the menu itself should sell adjacent demos.
- Техніка
- Bootstrap 5 dropdown markup with manual show/hide via mousemove/leave handlers
Компоненти
Blurred fixed navbar with hover-driven mega-menu showing image previews of all five home demos.
Full-screen GSAP preloader morphs an SVG curve to flat then slides up to reveal the page; spells out LOADING with charming.js.
Custom hover cursor that magnetically attracts itself to .hover-this targets and grows on every link.
Fixed-bottom circular SVG ring that fills as the page scrolls and acts as a back-to-top button.
Full-bleed dark hero with overlaid headline split between two lines, pull quote, project counter and big down-arrow icon.
Two-column intro that pairs an arrow illustration and a fw-300 mission line with two thin-bordered KPI tiles.
Two stacked horizontal marquees (filled + stroked) of services separated by star glyphs, infinitely looping in opposite directions.
Three-up Swiper of service cards with custom prev/next arrows and per-card icon, headline, blurb and Read More link.
Auto-paced Swiper of selected works with progressbar pagination, sub-bg captions with notched corners and a 'Our Portfolio' edge marquee.
Three stacked image-plus-copy feature cards next to a copy column with magnetic CTA, blurred orange glow in the corner.
Three-column team grid where each portrait has a sliding info caption and round social-icon column on hover.
Photo + quote testimonial Swiper with tall portrait, oversized fz-30 quote, dotted pagination and SVG quotation glyph.
Five-up looping Swiper of brand SVGs with a centered headline above and a thin trust-bar pill below.
Stacked Get-In-Touch / Contact-Us double marquee with full-width clickable overlay link to the contact page.
Four-column footer with logo, contact, useful links and an inline newsletter input plus four social icons.