Trending Now
Showing trending posts from Valley View Networks contributors only.
Why publication, not feed
When we started designing the new home page, the easiest path would have been to make the existing feed look better. Tighter cards, calmer colors, the same scrolling-forever architecture but in editorial typography. That would have been wrong. The reason has less to do with aesthetics than with what the surface is supposed to be. Valley View Networks is for graduates and professionals at career inflection points. The people we're building for are not looking for engagement; they're looking for material that helps them figure out what to do next. Material that helps them figure out what to do next does not arrive on the cadence of a social feed. It arrives on the cadence of a publication — selectively, edited, with bylines you trust. So the home page is now a publication. There are bylines, there is a briefing column, there is editorial typography, and there is a deliberate absence of follower counts, engagement metrics on chrome, and the algorithmic feed that ranks attention over substance. None of that is decoration. It's the design language saying what the platform is actually trying to be. If you've been using VVN for a while and the new home page feels slower, that's the intended effect. Slow is what publication feels like compared to feed. The trade we've made is that you get less of it, and what you get carries more weight per item. Whether that trade was worth it is a question we'll answer in usage. But it's worth being explicit about what the trade is.
Engineering the editorial card system
EditorialFeedCard is a single React component with a discriminated-union variant prop — article or hybrid — sharing a common BaseProps shape (title, subtitle, body, author, valley, dates). Article renders a vertical column with an optional cover above the headline. Hybrid renders a 45/55 grid on desktop with media on the left and text on the right, collapsing to a vertical stack below md. The hybrid grid is the part that took the most iteration. The instinct was to use items-start to keep the media at its aspect-video proportion, which produced the floating-thumbnail-next-to-tall-text result we walked away from. The shipped version uses grid items-stretch (the default) with the media container at aspect-video on mobile and aspect-auto on desktop, so the cell stretches to match the text column height and the absolute-positioned video object-covers whatever final dimensions it gets. Text drives height; media follows. Motion is deliberately quiet. The active rail indicator slides between items via Framer Motion's layoutId with a spring (stiffness 420, damping 34); everything else uses CSS transitions in the Carbon-productive range (240–300ms). Reduced-motion is gated at the CSS level globally and at the component level for the framer-motion components, so users who opt out get a fully still chrome. We deferred two things consciously. First, the staggered chrome entry on page load (Material 3 Expressive's 400–450ms cross-fade), because the motion noise wasn't justified by the editorial-restraint direction. Second, the full Briefing recommendation ranker; v1 is chronological, v2 will introduce per-user learned ranking. Both are noted in the architecture sketch; both can ship when the front-end has stopped moving.