Hier noteer ik internationale ontwikkelingen in het vakgebied om op de hoogte te blijven van trends en best practices, denk aan frameworks of designprincipes. Onder begeleiding worden keuzes gemaakt over technieken en tools om ontwikkeling van vaardigheden te verbeteren.
- Bronnen
- Trends en ontwikkelingen
- Experimenten
- Frontend focus
- CSS Weekly
- SmashingMagazine
- Medium
- Awwwards
- Behance
- Overige inspiratie
Ik ben aangemeld voor de onderstaande mailingslists:
- SmashingMagazine / https://www.smashingmagazine.com
- Frontend focus / https://frontendfoc.us
- CSSWeekly / https://css-weekly.com
- Medium / https://medium.com
Ik volg de onderstaande instagram accounts:
- Brutal.web / https://www.instagram.com/brutal.web/
- Dept Agency / https://www.instagram.com/deptagency/
- Numbered Agency / https://www.instagram.com/numbered.agency/
- Antinomy studio / https://www.instagram.com/antinomystudio/
- Merlin studio / https://www.instagram.com/merlindotstudio/
- Unseen studio / https://www.instagram.com/uns__nstudio/
- Estudio/nk / https://www.instagram.com/elestudionk/
- CoType Foundry / https://www.instagram.com/cotypefoundry/
- Code d’azur / https://www.instagram.com/codedazur/
- Awwwards / https://www.instagram.com/awwwards/
- Norday agency / https://www.instagram.com/norday_agency/
- Adoratorio studio / https://www.instagram.com/adoratorio.studio/
- Slaps creative / https://www.instagram.com/slapscreative/
- Frontend Design & Development hva / https://www.instagram.com/fdnd.nl/
Ik ben abbonnee van de onderstaande youtubechannels:
- Codegrid / https://www.youtube.com/@codegrid
- Kevin Powell / https://www.youtube.com/@KevinPowell
- Joy of code / https://www.youtube.com/@JoyofCodeDev/videos
- Web dev Simplified / https://www.youtube.com/@WebDevSimplified/videos
- Slaying the dragon / https://www.youtube.com/@slayingthedragon/videos
Web design in 2024:
- Drag Interaction
- Cinemagraphs
- Text-Only
- Ultra-minimalism
- Y2K Inspired Design
- Scrapbook Aesthetic
- Minimal Vintage
- Natural and Organic Textures
- User Experience
- Chatbots
Web design trends to watch in 2025:
- Unusual Layout
- Custom illustrations
- Cursor-Centric Interactivity
- Grid and Modular design
- Dynamic 3D experiences
- Playful interactive websites
- Scroll-To-Engage stories
- Radient Glow design
- AI content
While designers have grown familiar with chaos over the past few years, web design has tried to find order among the mess. But now, Kadussi says, designers are embracing the wreckage. Welcome to the world of anti-design.
With its roots in Brutalism, anti-design draws on harsh qualities that aim to break the principles of design, re-create the chaos around us and make a strong observational statement. This web trend is characterized by heavy, aggressive elements that broken and disproportional in appearance, such as clashing textures, overlapping elements, big fonts and asymmetrical, unstructured layouts.
Because designers use anti-design to push creative limits and connect with new audiences, this attention-grabbing style won't fit every website and brand. Kadussi points out that many online businesses like e-commerce depend on having a specific website structure and user flow, so anti-design’s nature may limit its success. However, if you have a portfolio, special project, campaign or initiative, anti-design may help you portray a specific subtext. For example, the style helped the New York Times convey the detritus of constant climate catastrophe in this web package.
Web pages that replace photography with illustrations are becoming a popular web design trend. Custom illustrations have many benefits. They can make your website look better, explain complex ideas simply, and help guide visitors. They can improve your website's search engine ranking too. With Google’s continued push for quick load times through its Core Web Vitals page experience measurements, more web designers and developers are looking for ways to speed up web pages.
Finally, a custom, unique illustration that doesn’t exist anywhere else on the web can be a fantastic way to capture users’ attention and imagination. Spending the extra time and budget on a high-quality, original illustration, not just a recycled stock illustration, can benefit your brand greatly.
Custom cursors are currently one of the biggest trends in website design. A custom website cursor could initially appear to be another piece of design. But this design idea is far more complex. The cursor is the primary element that connects the user and the website while using a desktop device to visit a website. You can really use this cursor to your advantage to increase website interaction and engagement rates like never before if you’re clever enough.
- https://www.airborne.studio
- https://flowmingo-mini-6.webflow.io
- https://gelatolaboca.com
- https://table-hover-animation.webflow.io
- https://neodlx.io
- https://www.renflowdesigns.com/404
Grids are merely one of the many tools at a graphic designer’s disposal. Modern-day innovations provide designers with ample opportunities: in the early 1990s, at the dawn of the internet, websites were designed using HTML tables. Designers either chose to use grids or ignored their existence altogether depending on what they saw fit.
With the adoption of mobile devices, design approaches had to be revised. Designers realized that complex design looks horrible on smartphone screens, while catchy animated banners often only irritate users. Moreover, some elements had to be removed or simplified to help with the loading speed. It is very common to use column grids to create adaptive websites.
Many gaming UIs have a sci-fi or futuristic design aesthetic, with glowing edges, holographic elements, and complex motion graphics. Web designers are increasingly drawing inspiration from this style, integrating 3D, intricate UI details and detailed microinteractions to create an atmosphere of high-tech immersion.
Web designers are now borrowing the visually-complex and dynamically-interactive aesthetics pioneered by game designers that gamers have long appreciated, translating these visual cues into broader digital experiences across websites and applications.
The aesthetic manifests through layered visual elements that simulate advanced digital environments, featuring translucent panels, augmented reality-inspired experiences, and interactive components that respond with cinematic fluidity. By integrating 3D-like depth, sophisticated microinteractions, and color palettes reminiscent of sci-fi games — electric blues, stark whites, and neon accents — these web designs create an immersive experience that feels simultaneously futuristic and intuitively navigable.
- https://www.odyssey.shaga.xyz
- https://www.apple.com/iphone-16-pro/
- https://petertarka.com/molton-brown
- https://www.otherlife.xyz
Adobe Flash transformed web to experimental in the late 90s and early 2000s, websites went from static information repositories to dynamic, interactive playgrounds. Designers were able to create intricate animations, immersive experiences, games, and websites that were inherently interactive. It was an era marked by design that celebrated and prioritized experience over pure functionality — and where websites could be unpredictable, whimsical, and entirely unique.
Today's designers are recapturing that spirit of creative freedom, but with significant improvements thanks to modern animation and design technologies like GSAP (whose parent company was recently acquired by Webflow), Rive and Spline.
But it’s important to note that this trend goes beyond mere technical recreation. Designers are deliberately invoking the playful, slightly chaotic aesthetic of early web experiences — bringing back bold animations, unexpected interactions, and a sense of digital spontaneity.
“The early web felt human and subversive, full of internet art, interactivity and sparkly cursors,” Cassie Evans, Developer Relations Engineer at GSAP, observes. “With the death of Flash, we swung back hard in the other direction – looking at you Web2.0 – but it feels like the cultural pendulum is stabilizing again. Animated loaders are back (contentious, I know), alongside fun 404 pages, konami codes, and cursor interactions. It feels like people are pushing the boundaries again, crafting a little human high-five from creator to user across the internet, which, in an era of algorithmic feeds and AI-generated content, is more important than ever.”
The evolution of scrolling techniques in web design has transformed how users interact with digital content, turning what was once a mundane navigation function into a dynamic, storytelling experience. This trend goes far beyond traditional scrollytelling, reimagining scroll interactions as a fundamental design language that creates depth, narrative, and visual excitement throughout a web experience.
Scroll-based animations and interactions have become sophisticated storytelling techniques that breathe new life into websites. Designers are building advanced scrolls to create experiences that respond dynamically to user movement: revealing content, triggering animations, and creating multi-layered visual narratives.
This trend is a result of the combined demand of unique ways to communicate ideas on the web, in tandem with faster devices, browsers, and bandwidths across the web that can handle the constant, smooth animation of elements as you scroll through a page. “Scroll-triggered animations are also a more natural, expected way for users to experience content because it is directly associated with their actions as they navigate the page, as opposed to time-based animations that may not be experienced exactly as intended by the creator,”.
Some of the most compelling applications of animated scroll-based design we’ve seen so far are in the world of data and product visualizations, using JavaScript libraries like Three.js and GSAP to build animated scrolls that progressively reveal information and product imagery in a more immersive format. As users move through a page, complex graphics can unfold, data points can animate into view, and entire visual landscapes can transform — making content consumption a more engaging and interactive experience.
These more advanced applications of scroll-based design also reflect a broader shift in web design and user behavior — from passive consumption to active exploration. Users are no longer simply reading or viewing content; they are actively participating in its revelation, making for more engaging and memorable user experiences.
Designers are embracing the use of luminous aesthetics that include sophisticated glows and light blooms. This approach transforms designs into vibrant, almost ethereal experiences that create depth, emphasize interaction, and introduce a sense of dynamic energy. “Glows can be used to serve greater functional purposes: to enhance and feature different aspects of design compositions and illustrate a sense of power,” says Johnnie Gomez Alzaga, Staff Brand Designer at Webflow.
With traces back to everything from digital photography, to video games, to Y2K aesthetics, these radiant effects simulate the way light interacts with surfaces in both digital and physical environments. More specifically, they often mimic the way light behaves on high-end displays and advanced screens, borrowing visual language from OLED technologies and retina displays.
Glows subtly draw attention to interactive elements, create a sense of depth, and provide visual feedback that makes websites feel more responsive. Designers strategically use them around buttons, navigation elements, and key visual components to create a sense of illumination and realism.
These light effects range from subtle, almost imperceptible halos to more dramatic, vibrant blooms that seem to pulse and breathe as users interact with them. “Glows are a way to incorporate hardware materiality into a website. They’re challenging to realistically build, making them a great focus piece for designers, but they also support a page’s function by pulling users’ eyes towards the area they should focus on,” explains Meg Wayne, Staff Brand Designer at Webflow.
By simulating the way light naturally diffuses and reflects, the use of glows suggests movement, responsiveness, and a kind of luminescence that makes web experiences feel more alive and interactive. This technique also mirrors advancements in tech: as screens become more high-definition and our digital experiences become more immersive, these light and glow effects represent an emerging, nuanced approach to making web design feel more human, more responsive, and more connected to our sensory experiences of light and interaction.
- https://fancy.design/works/argus-vpn.html
- https://dribbble.com/shots/21339985-Reflect-app-Re-Design
- https://pinatap.beaucoup.studio
AI tools can provide the power and ease designers need when they want to explore visual concepts. From detailed, stylized illustrations to hyper-realistic product visualizations, AI-generated imagery allows for a level of creative exploration that previously may have been too expensive or time-consuming to undertake otherwise.
Simultaneously, tools like Midjourney and Visual Electric have changed the game when it comes to using AI to generate custom, highly-stylized imagery and illustrations. And these aren’t just solutions for non-designers; a growing number of seasoned creative professionals are actively incorporating AI-generated visuals into their designs depending on project needs.
This is a notable shift from the traditional methods of how visual content has been conceptualized and created, but one that design leaders like Pentagram’s Paula Scher welcomes, who recently defended her agency’s use of Midjourney for a government website.
Generative AI is reshaping the entire concept of visual design, challenging traditional boundaries between generated and created imagery. And the designers embracing it are also increasingly becoming orchestrators of visual generation, using AI as a powerful creative tool that extends their own creative capabilities.
Web features to watch in 2025:
- Scroll driven animations
- Container queries
- anchor-positioning
- exclusive accordions
- :has
- high-definition colors
- relative colors
- text-wrap: balance
- View Transitions API
- auto field-sizing
- hidden=until-found
- Live And Late Validation
A scroll-driven animation is an animation that responds to scrolling. There’s a direct link between scrolling progress and the animation’s progress. Scroll-driven animations are different than scroll-triggered animations, which execute on scroll and run in their entirety. Scroll-driven animations pause, play, and run with the direction of the scroll. It sounds to me like scroll-triggered animations are a lot like the CSS version of the JavaScript intersection observer that fires and plays independently of scroll.
https://github.com/lisavanmansom/dry-drop-and-heal/tree/homepage-scrolldrivenanimation
Ik heb de section een volledige viewport height gegeven voor zodat het eenvoudige kan scrollen. Door de viewtimeline kan de er getracked worden wanneer er gehorizontaal moet worden gescrolled.
Bij .pin-wrap-sticky is de property position: sticky; meegegeven zodat het in beeld blijft tijdens het scrollen. De .pin-wrap wordt uiteindelijk geanimeerd op de viewtimeline. Verder staan er properties voor de positie bij .pin-wrap class, hierdoor kan alles zichtbaar worden tijdens de horizontal scroll.
section {
height: 100vh;
overflow: visible; /* for position sticky */
view-timeline-name: --section-pin-tl;
view-timeline-axis: block;
}
.pin-wrap-sticky {
height: 100vh;
overflow-x: hidden;
position: sticky;
top: 0;
width: 100vw;
}
.pin-wrap {
display: flex;
flex-direction: row;
justify-content: flex-start;
height: 100vh;
width: 600vmax;
/* Hook animation */
will-change: transform;
animation: linear move forwards;
/* Link animation to view-timeline */
animation-timeline: --section-pin-tl;
animation-range: contain 10% contain 66.5%;
}
@keyframes move {
/* moves horizontally, right edge is aligned against viewport */
to { transform: translateX(calc(-100% + 100vw)); }
}
Container queries are often considered a modern approach to responsive web design where traditional media queries have long been the gold standard — the reason being that we can create layouts made with elements that respond to, say, the width of their containers rather than the width of the viewport.
.l-d {
display: flex;
flex-wrap: nowrap;
gap: 1.5em;
overflow: scroll;
width: 90%;
scroll-snap-type: x mandatory;
container: card-banner / inline-size;
}
@container card-banner (min-width: 450px) {
article {
min-width: 24.75em;
}
}
@container card-banner (min-width: 750px) {
article {
min-width: 38em;
height: 37em;
}
article img {
min-height: 52%;
max-width: unset;
}
.a-d {
max-height: 15.5em;
min-width: 95%;
}
.a-d div {
flex-direction: row;
}
.a-d div p {
width: 21em;
}
}
There are a number of use cases where a smooth visual transition can make the user experience more engaging. When a thumbnail image on a product listing page transitions into a full-size image on the product detail page, for example, or when you have a fixed navigation bar that stays in place as you navigate from one page to another. The View Transitions API helps us create seamless visual transitions between different views on a site.
View transitions can be triggered not only on a single document but also between two different documents. Both rely on the same principle: The browser takes snapshots of the old and new states, the DOM gets updated while rendering is suppressed, and the transitions are powered by CSS Animations.
https://developer.chrome.com/docs/web-platform/view-transitions?hl=nl
<script>
import { SkeletonVT } from '$lib'
import { onNavigate } from '$app/navigation';
function delayNavigation() {
return new Promise((resolve) => setTimeout(resolve, 100));
}
onNavigate(async (navigation) => {
if (!document.startViewTransition) {
await delayNavigation();
return;
}
return new Promise((resolve) => {
document.startViewTransition(async () => {
await delayNavigation();
resolve();
await navigation.complete;
});
});
});
</script>
<div class="w-d-t">
<h1>Die young, be Glamourous</h1>
<h2>share some holiday spirits with dying</h2>
<SkeletonVT name="skeleton" pageStyle="skeleton"/>
<SkeletonVT name="heavenlyBG" pageStyle="heavenlyBG"/>
<SkeletonVT name="treesBG" pageStyle="error-trees"/>
<SkeletonVT name="treesBG-invert" pageStyle="error-trees-invert"/>
</div>
<slot />
<style>
.w-d-t {
filter: hue-rotate(330deg) saturate(2);
box-shadow: inset 0px 100px 300px rgb(248, 19, 19);
position: fixed;
pointer-events: none;
width: 100vw;
transform: translateX(-101%);
view-transition-name: v-s;
}
h1 {
font: 100 3.5em LastChristmas;
filter: blur(1px);
text-shadow: var(--b) 2px 2px;
}
h2 {
font: 100 1.1em Apple Color Emoji;
text-shadow: var(--b) 2px 2px;
}
@media (prefers-reduced-motion: no-preference) {
:root::view-transition-group(v-s) {
animation: seen 3s ease-in-out;
}
}
@keyframes seen {
0% {
transform: none;
opacity: 0;
}
20%, 90% {
opacity: 1;
}
99% {
opacity: 0;
transform: none;
}
100% {
transform: translateX(-101%)
}
}
</style>
Whether you use it for footnotes, tooltips, connector lines, visual cross-referencing, or dynamic labels in charts, the CSS Anchor Positioning API enables us to natively position elements relative to other elements, known as anchors. Browser support is still limited, so you might want to use the API with some precautions.
The ‘exclusive accordion’ is a variation of the accordion component. It only allows one disclosure widget to be open at the same time, so when a user opens a new one, the one that is already open will be closed automatically to save space. Thanks to CSS, we can now create the effect without a single line of JavaScript.
To build an exclusive accordion, we need to add a name attribute to the <details> elements. When this attribute is used, all <details> elements that have the same name value form a semantic group and behave as an exclusive accordion. Bramus Van Damme summarized in detail how it works.
https://developer.chrome.com/docs/css-ui/exclusive-accordion?hl=nl
Historically, CSS selectors have worked in a top-down fashion, allowing us to style a child based on its parent. The new CSS pseudo-class :has works the other way round: We can now style a parent based on its children. But that’s not all yet. Josh W. Comeau wrote a fantastic introduction to :has in which he explores real-world use cases that show what the pseudo-class is capable of.
https://www.joshwcomeau.com/css/has/
With high-definition colors with LCH, okLCH, LAB, and okLAB that give us access to 50% more colors, the times of RGB/HSL might be over soon. Both OKLCH and OKLAB are based on human perception and can specify any color the human eye can see. While OKLAB works best for rich gradients, OKLCH is a fantastic fit for color palettes in design systems. OKLCH/OKLAB colors are fully supported in Chrome, Edge, Safari, Firefox, and Opera. Figma doesn’t support them yet.
Let’s say you have a background color and want to reduce its luminosity by 25%, or you want to use a complementary color without having to calculate it yourself. The relative color syntax (RCS) makes it possible to create a new color based on a given color. To derive and compute a new color, we can use the from keyword for color functions (color(), hsl(), oklch(), etc.) to modify the values of the input color.
By applying the text-wrap: balance property, the browser will automatically calculate the number of words and divide them equally between two lines — perfect for page titles, card titles, tooltips, modals, and FAQs, for example. Ahmad Shadeed wrote a helpful guide to text-wrap: balance in which he takes a detailed look at the property and how it can help you make your headlines look more consistent.
When dealing with large blocks of text, such as paragraphs, you might want to look into text-wrap: pretty to prevent orphans on the last line.
https://ishadeed.com/article/css-text-wrap-balance/ https://developer.chrome.com/blog/css-text-wrap-pretty?hl=nl
Finding just the right size for an input field usually involves a lot of guesswork — or JavaScript — to count characters and increase the field’s height or width as a user enters text. CSS field-sizing is here to change that. With field-sizing, we can auto-grow inputs and text areas, but also auto-shrink short select menus, so the form always fits content size perfectly. All we need to make it happen is one line of CSS.
https://developer.chrome.com/docs/css-ui/css-field-sizing?hl=nl
hidden=until-found
Accordions are a popular UI pattern, but they come with a caveat: The content inside the collapsed sections is impossible to search with find-in-page search. By using the hidden=until-found attribute and the beforematch event, we can solve the problem and even make the content accessible to search engines.
As Joey Arhar explains in his guide to making collapsed content searchable, you can replace the styles that hide the section with the hidden=until-found attribute. If your page also has another state that needs to be kept in sync with whether or not your section is revealed, he recommends adding a beforematch event listener. It will be fired on the hidden=until-found element right before the element is revealed by the browser.
https://developer.chrome.com/docs/css-ui/hidden-until-found?hl=nl
When we use :valid and :invalid to apply styling based on a user’s input, there’s a downside: a form control that is required and empty will match :invalid even if a user hasn’t started interacting with it yet. To prevent this from happening, we usually had to write stateful code that keeps track of input a user has changed. But not anymore.
With :user-valid and :user-invalid, we now have a native CSS solution that handles all of this automatically. Contrary to :valid and :invalid, the :user-valid and :user-invalid pseudo-classes give users feedback about mistakes only after they have changed the input. :user-valid and :user-invalid work with input, select, and textarea controls.
https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes
In Sprint 17 heb ik 3 verschillende creative spikes uitgevoerd. De creative spikes zijn gemaakt met Sveltekit. Met de creative spike zijn er nieuwe technieken uitgetest zoals view transitions en scroll driven animations. Om volledig creatief los te kunnen gaan is er gekozen om niet de huisstijl te volgen van de opdrachtgever maar met thema's te werken bij elke creative spike. Door dit te doen is er meer conceptueel gewerkt en zijn er verschillende creative mogelijkheden uitgeprobeerd.
- aspect-ratio
- object-fit
- margin-inline
- text-underline-offset
- outline-offset
- scroll-margin-top/bottom
- color-scheme
- accent-color
- width: fit-content
- overscroll-behavior
- text-wrap
- scrollbar-gutter
WWhen design system users run into issues designing and developing with the system, they often have a hard time distinguishing between a bug, a missing feature, an intentional design deviation, a new pattern they need to create, or something else. Design system teams need to be proactive and obnoxiously clear about how to connect with them. No one wants to brace for a thorough scolding by the Pattern Police; people want to be heard, understood, and helped.
- Bugs are defects in existing design system components
- Visual discrepancies are designs that don’t match the available coded UI components. Visual discrepancies can be a design system visual bug.
- A design system feature is a new component or variant that isn’t currently in the design system but maybe ought to be.
- A pattern — or recipe — is a composition of design system components that is owned and assembled by the product team
Design Language includes guidelines on usage of colour, typography, layout, iconography, photography, illustrations, and voice and tone.
How, then, do you embed a design language into a large product with such a rich history? By creating a shared foundational layer across design and code for styles and assets, with:
- Design tokens: Design tokens are used for color, typography, shadow, border-radius, spacing and grid. These are building pieces to help everything we design feel part of the same family. Functional tokens communicate a specific semantic context. Colors have semantic groups like action, constructive, destructive, etc. But they also belong to specific functional groups like foreground, background, border, etc.
- The Design API: The Design API stores foundational data, versions all changes, and converts platform-agnostic values into platform-specific tokens for iOS, Android, Vue, React and Figma. To automatically pull data from the Design API to Figma, we built an internal plugin. It safely pulls all style data (including metadata with description) from our Design API.
https://booking.design/how-we-built-our-multi-platform-design-system-at-booking-com-d7b895399d40
https://playbook.ebay.com/design-system
Examples of How You Can Ruin User Experience:
- Autoplay of audio/video;
- Unstructured web forms;
- Long dropdowns / Сhecklists with a large number of options;
- Low discoverability;
- Bad color scheme;
- CAPTCHA overuse;
- Lack of intuitiveness (users love patterns).
https://medium.com/@Flowmapp/bad-bad-ux-20-common-mistakes-in-user-experience-d30301ba686b
@next/codemod is a CLI tool that helps to automate our upgrading and breaking changes with every major Next.js release. This tool helps you upgrade your codebase to the latest stable or prerelease versions. The CLI will update your dependencies, show available codemods, and guide you through applying them.
npx @next/codemod@canary <transform> <path>
https://nextjs.org/docs/app/building-your-application/upgrading/codemods
React Compiler is an experimental compiler worked by Meta’s React team. This compiler is mainly focused on understanding the javascript semantics and rules of Reactjs that help in code optimization and reduce the amount of manual memorization code such as useMemo and useCallback hooks. For more on React Compiler check this doc.
As part of the version 15 release, Next.js App router is enabled with the React 19 version but it is not production-ready because React 19 is still in the RC phase. Once React 19 is ready we can able to enable it.
In Next 15, they added a new flag/badge at the end of the page saying “Static Route” to indicate the difference between the Static and dynamic route. It is enabled by default, to turn off by adding a flag in the nextConfig file as below.
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
devIndicators: {
appIsrStatus: false,
},
}
export default nextConfig
A new Form component has been introduced in this release, which helps developers to use the inbuilt future instead of depending the third-party libraries. This Form component extends the HTML <form> element that comes with prefetching, and client-side navigation.
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#5-soft-navigation
There is a new feature that helps to remove the unnecessary external packages to be skipped in the build by adding additional configurations in the nextConfig file as below.
const nextConfig = {
// Automatically bundle external packages in the Pages Router:
bundlePagesRouterDependencies: true,
// Opt specific packages out of bundling for both App and Pages Router:
serverExternalPackages: ['package-name'],
};
export default nextConfig;
https://nextjs.org/docs/app/building-your-application/optimizing/package-bundling
In server-side rendering, the server waits for the request before rendering the pages which is unnecessary for all the use cases. In this release, they made some changes to this. If there is any dependent information like headers, cookies, params, etc, they can fetch data asynchronously and let the content render.
n earlier version, there is a caching feature that catches the fetch requests, GET Route Handlers, and Client Router by default. In this version they are removing that default caching. To retain the caching functionality we have to passed an additional options to it.
Utsubo is a Technology-First Creative Studio specializing in real-time 3D experiences, interactive installations, and WebGPU.
- Cursor interaction
- Storytelling
- Scroll animations
- 3D
- Transitions
LCDC Seoul invites you to the Christmas feast—come and see if you can spot the mischievous gnomes running around during the festive celebration.
- Games & entertainment
- Transitions
- 3D
- Interaction
- Animation
Unium is a company that transforms the world you envision into value through design.
- Interactive design
- Scroll animations
- Transitions
- Animations
Website of Polecat Agency that builds diverse software, spanning wearables and mobile applications to complex industrial and corporate systems — with ease and fun
- Web design / illustrations
- Interactive design
- Experimental
- Colorful
- Transitions
- Animations
Ik gebruik Pinterest vaak voor inspiratie voor verschillende dingen, je kan trends vinden, maar ook niché stijlen die van toepassing kunnen zijn op het project waarmee je bezig bent. Op Pinterest hou ik 2 borden bij, 1 voor serieuzere opdrachten en de ander voor de digital garden / i-love-website
Ik gebruik behance als inspiratie voor als ik iets maakt wat niet serieus hoeft te zijn, zoals met een creative spike of squadpage / profile card. Op behance kan je eenvoudig grafische trends vinden en die implementeren in je eigen design. Behance is meer een grafisch platform dan voor web design, maar je kan er ook dingen over typografie en kleur vinden vrij eenvoudig is om te implementeren.
overzicht beeldmateriaal wat is gebruikt als inspiratie.
Ik haal meestal inspiratie van de covers van de Bloomberg businessweek, die ik online zie / ik ben geen abonnee. Anyway, hier geldt ook dat dit vooral van toepassing is als ik creative vrijheid heb, denk aan creative spike, i-love-website, squadpage / profile card. Ik heb hieruit meerdere keren inspiratie gehaald voor layouts maar ook voor interactive design.
- Trends: https://webflow.com/blog/web-design-trends-2025 / https://youtu.be/gR-yNIGICzM?si=i2wKHDES8j_vLY2E / https://www.wix.com/blog/web-design-trends / https://www.tiny.cloud/blog/a-guide-to-grids-blog-design/ / https://medium.com/@nachi.singh2/introduction-to-custom-cursor-interactions-in-web-design-7175273b1591
- Ontwikkelingen: https://scroll-driven-animations.style / https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/ / https://css-tricks.com/css-container-queries/