[XenVibe] XenDynamicList — Motion-Driven XenForo 2.3 Style | Premium Styles & Add-ons Store 1.0.0

Motion as a Design Language

XenDynamicList Demo​

Most forum styles are static. You load a page, everything appears at once, you scroll through walls of text. DynamicList takes a different approach — motion is baked into every layer.

When a page loads, rows cascade in with staggered slide-up animations, each one 80ms after the last. A traveling glow sweeps across each row as it appears, catching the eye without demanding attention. Hover over a thread and it lifts off the page with a soft shadow and a color-coded accent bar that glows from the side.

These are not decorative flourishes. They are carefully timed cues that guide the eye, establish hierarchy, and make your forum feel responsive to every interaction.

The Layout: Structured and Spacious​

DynamicList uses a four-column grid layout — three columns for main content plus a collapsible left sidebar for navigation. The max content width sits at 1400px, giving threads and forum nodes room to breathe.

The sidebar slides into a slim icon strip on desktop when collapsed, and transforms into a slide-out drawer on tablets and mobile. Members choose their preference, and it sticks across sessions via localStorage.

A Header That Follows You​

The sticky header uses backdrop blur with a smooth auto-hide behavior — scroll down and it slides away to maximize reading space. Scroll up and it reappears instantly with a subtle shadow. A pin/unpin toggle button lets users lock the header in place or let it flow with their scrolling.

Navigation links are split from their dropdown triggers — the link navigates directly on tap, while a separate arrow button opens the submenu. This eliminates the classic double-tap problem on touch devices.

Micro-Animations That Matter​

Every interactive element responds to user input:

• Thread rows lift 2px on hover with a layered box shadow and a color-coded accent bar that fades in from the inline-start edge
• Avatars scale up 8% on hover with a blue ring glow
• Forum nodes reveal with staggered cascade — each node slides in 80ms after the previous one
• Glow sweep — a linear gradient highlight slides across each row as it appears, adding a subtle shimmer effect
• Sidebar widgets cascade in with their own stagger delay (200ms base + 100ms per widget)
• Scroll-to-top FAB appears smoothly when you scroll past the header

All animations respect prefers-reduced-motion — users who prefer minimal motion get instant rendering with no animation.

Every Page, Fully Styled​

• Forum List — Four-column grid with collapsible left sidebar. Each forum node shows Material Symbol icons with 10 rotating accent colors. Stats (threads, messages) display inline. Categories have togglable visibility with smooth collapse animations.
• Forum View — Thread listing with compact rows, colored prefix badges, reply/view counts, and last replier avatar. Sub-forum nodes styled consistently with the forum list. Sticky threads highlighted with an accent border and darker background.
• Thread View — Post cards with clean spacing, vote system for Q&A threads (positioned absolute inline-end), blue accent bar on the original post. Replies divider between OP and responses. Signatures on first post only.
• What's New — Unified card container with sub-navigation tabs (Posts, Profile Posts, Latest Activity, News Feed, Featured Content). Each sub-page gets its own styling — profile posts as standalone cards, latest activity with inline avatars.
• Members List — Table-based layout with sortable columns, section headers, follow/unfollow buttons with AJAX toggle, and alphabetical letter navigation.
• Member Profile — Full redesign with wide cover banner, overlapping rounded avatar, inline stats row (messages, reaction score, points, trophies), tabbed content sections, and sidebar widget with user details. Buttons relocated to the sidebar for cleaner profile headers.

Built for Arabic and RTL​

Full RTL support using CSS Logical Properties throughout — inset-inline-start, margin-inline-end, padding-inline. The accent bars, sidebar toggle, hover effects, and all layout decisions use logical properties that mirror correctly for Arabic, Hebrew, and Persian.

Typography: Plus Jakarta Sans for Latin text, Noto Sans Arabic for Arabic content.

Responsive Without Compromise​

Four breakpoints handle every device:

• Desktop (1024px+): Full four-column grid with expanded sidebar
• Tablet landscape (768-1023px): Sidebar as slide-out drawer, smaller nav text, hidden dropdown arrows
• Tablet portrait / Large phone: Collapsible sidebar, touch-optimized header
• Mobile (<768px): Single column, bottom navigation bar with FAB (floating action button) for thread creation, hidden meta columns in thread listings

A special (pointer: coarse) media query detects touch tablets (like iPad Pro at 1024px) and forces drawer mode for the sidebar — even if the viewport is desktop-width.

The Bottom Navigation​

On mobile, a fixed bottom navigation bar replaces the header navigation with five targets: Home, What's New, Create Thread (center FAB with accent color), Members, and Your Account. The FAB uses XenForo's overlay system for inline thread creation.

Hide, Collapse, Toggle​

Forum categories and sidebar widgets can be individually hidden by members. Hidden items show a dimmed state with a count badge. The hide/show state persists in localStorage. Smooth CSS transitions handle the collapse animation with zero layout shift on initial page load.

Design Details​

• 10 rotating accent colors for forum icons — theme-aware for dark/light
• Custom scrollbar styling matching the theme palette
• Rounded corners on a 4-step scale (4px, 8px, 12px, 16px)
• Thread hover: translateY(-2px) + layered box-shadow + accent bar glow
• Staggered reveal: 80ms cascade delay per item, 0.6s slide-up with cubic-bezier easing
• Glow sweep: linear-gradient shimmer that slides across each row
• Avatar hover: scale(1.08) + 3px blue ring with 25% opacity
• Pin indicator: colored dot before sticky thread titles
• Pinned header toggle with slashed/unslashed pin icon
• Plus Jakarta Sans + Noto Sans Arabic typography
• Google Material Symbols icons throughout
• Zero CLS (Cumulative Layout Shift) on page load